web-dev-qa-db-fra.com

Comment itérer sur une structure JSON?

J'ai la structure JSON suivante:

[{ "id":"10", "class": "child-of-9" }, { "id": "11", "classd": "child-of-10" }]

Comment puis-je itérer dessus en utilisant JavaScript?

javascriptjsonloops
473
Flueras Bogdan

Tiré de documentation jQuery :

var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {
  $("#" + this).text("My id is " + this + ".");
  return (this != "four"); // will stop running to skip "five"
});

jQuery.each(obj, function(i, val) {
  $("#" + i).append(document.createTextNode(" - " + val));
});
424
Marquis Wang
var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"}];

for (var i = 0; i < arr.length; i++){
    var obj = arr[i];
    for (var key in obj){
        var attrName = key;
        var attrValue = obj[key];
    }
}

var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "class": "child-of-10"}];
    
for (var i = 0; i < arr.length; i++){
  document.write("<br><br>array index: " + i);
  var obj = arr[i];
  for (var key in obj){
    var value = obj[key];
    document.write("<br> - " + key + ": " + value);
  }
}

remarque: la méthode pour-en est cool pour les objets simples. Pas très intelligent à utiliser avec un objet DOM.

489
Your Friend Ken

Utilisez foreach:

<html>
<body>
<script type="text/javascript">
var mycars = [{name:'Susita'}, {name:'BMW'}];
for (i in mycars)
{
  document.write(mycars[i].name + "<br />");
}
</script>
</body>
</html>

Aura pour résultat:

Susita
BMW
79
AlikElzin-kilaka

S'il vous plaît laissez-moi savoir si ce n'est pas facile:

var jsonObject = {
  name: 'Amit Kumar',
  Age: '27'
};

for (var prop in jsonObject) {
  alert("Key:" + prop);
  alert("Value:" + jsonObject[prop]);
}
56
abdulbasit

Si ceci est votre dataArray:

var dataArray = [{"id":28,"class":"Sweden"}, {"id":56,"class":"USA"}, {"id":89,"class":"England"}];

ensuite:

$(jQuery.parseJSON(JSON.stringify(dataArray))).each(function() {  
         var ID = this.id;
         var CLASS = this.class;
});
38
Swapnil Godambe

exemple de mootools:

var ret = JSON.decode(jsonstr);

ret.each(function(item){
    alert(item.id+'_'+item.classd);
});
16
Jason

Copié et collé depuis http://www.w3schools.com , la surcharge JQuery n’est pas nécessaire.

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
    text += person[x];
}

RÉSULTAT: John Doe 25

15
Gerrit Brink

Vous pouvez utiliser une mini bibliothèque comme objx - http://objx.googlecode.com/

Vous pouvez écrire du code comme ceci:

var data =  [ {"id":"10", "class": "child-of-9"},
              {"id":"11", "class": "child-of-10"}];

// alert all IDs
objx(data).each(function(item) { alert(item.id) });

// get all IDs into a new array
var ids = objx(data).collect("id").obj();

// group by class
var grouped = objx(data).group(function(item){ return item.class; }).obj()

Il existe plusieurs "plugins" disponibles pour vous permettre de gérer des données comme celle-ci, voir http://code.google.com/p/objx-plugins/wiki/PluginLibrary

10
Mat Ryer

Avec les objets imbriqués, il peut être récupéré comme par fonction récursive:

function inside(events)
  {
    for (i in events) {
      if (typeof events[i] === 'object')
        inside(events[i]);
      else
      alert(events[i]);
    }
  }
  inside(events);

où as events est un objet json.

10
Fatima Zohra

ceci est un exemple JavaScript pur et commenté.

  <script language="JavaScript" type="text/javascript">
  function iterate_json(){
            // Create our XMLHttpRequest object
            var hr = new XMLHttpRequest();
            // Create some variables we need to send to our PHP file
            hr.open("GET", "json-note.php", true);//this is your php file containing json

            hr.setRequestHeader("Content-type", "application/json", true);
            // Access the onreadystatechange event for the XMLHttpRequest object
            hr.onreadystatechange = function() {
                if(hr.readyState == 4 && hr.status == 200) {
                    var data = JSON.parse(hr.responseText);
                    var results = document.getElementById("myDiv");//myDiv is the div id
                    for (var obj in data){
                    results.innerHTML += data[obj].id+ "is"+data[obj].class + "<br/>";
                    }
                }
            }

            hr.send(null); 
        }
</script>
<script language="JavaScript" type="text/javascript">iterate_json();</script>// call function here
9
karto

Le marquis Wang pourrait bien être la meilleure réponse lors de l'utilisation de jQuery.

Voici quelque chose d'assez similaire en JavaScript pur, utilisant la méthode forEach de JavaScript. forEach prend une fonction en tant qu'argument. Cette fonction sera ensuite appelée pour chaque élément du tableau avec ledit élément comme argument.

Court et facile:

<script>
var results = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"}];

results.forEach( function( item ) {
    console.log( item );
    });
</script>
9
Fabien Snauwaert
var jsonString = "{\"schema\": {\"title\": \"User Feedback\", \"description\":\"so\", \"type\":\"object\", \"properties\":{\"name\":{\"type\":\"string\"}}}," +
                        "\"options\":{ \"form\":{\"attributes\":{}, \"buttons\":{ \"submit\":{ \"title\":\"It\", \"click\":\"function(){alert('hello');}\" }}} }}";
var jsonData = JSON.parse(jsonString);

function Iterate(data)
{
    jQuery.each(data, function (index, value) {
        if (typeof value == 'object') {
            alert("Object " + index);
            Iterate(value);
        }
        else {
             alert(index + "   :   " + value);
        }
    });

};

Iterate(jsonData);
4
Vaughn Gavin

Une autre solution pour naviguer dans les documents JSON est JSONiq (implémentée dans le moteur Zorba ), où vous pouvez écrire quelque chose comme:

jsoniq version "1.0";

let $doc := [
  {"id":"10", "class": "child-of-9"},
  {"id":"11", "class": "child-of-10"}
]
for $entry in members($doc)             (: binds $entry to each object in turn :)
return $entry.class                     (: gets the value associated with "class" :)

Vous pouvez l'exécuter sur http://try.zorba.io/

4
Ghislain Fourny