Boucle JavaScript dans un tableau JSON ?

Question

J'essaie de boucler le tableau json suivant :

{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "hello1@email.se"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
}

J'ai essayé ce qui suit

for (var key in data) {
   if (data.hasOwnProperty(key)) {
      console.log(data[key].id);
   }
}

Mais pour une raison quelconque, je ne reçois que la première partie, les valeurs ID 1.

Des idées ?

Answer 1

Votre JSON devrait ressembler à ceci :

let json = [{
    "id" : "1", 
    "msg"   : "hi",
    "tid" : "2013-05-05 23:35",
    "fromWho": "hello1@email.se"
},
{
    "id" : "2", 
    "msg"   : "there",
    "tid" : "2013-05-05 23:45",
    "fromWho": "hello2@email.se"
}];

Vous pouvez boucler sur le tableau comme ceci :

for(let i = 0; i < json.length; i++) {
    let obj = json[i];

    console.log(obj.id);
}

Ou comme ceci (suggéré par Eric) : faites attention au support d'IE.

json.forEach(function(obj) { console.log(obj.id); });

Answer 2

Il y a quelques problèmes dans votre code, d'abord votre json doit ressembler à :

var json = [{
"id" : "1", 
"msg"   : "hi",
"tid" : "2013-05-05 23:35",
"fromWho": "hello1@email.se"
},
{
"id" : "2", 
"msg"   : "there",
"tid" : "2013-05-05 23:45",
"fromWho": "hello2@email.se"
}];

Ensuite, vous pouvez itérer comme ceci :

for (var key in json) {
if (json.hasOwnProperty(key)) {
  alert(json[key].id);
  alert(json[key].msg);
}
}

Et cela donne un résultat parfait.

Voir le violon ici : http://jsfiddle.net/zrSmp/

Answer 3

Essayez ceci

var json = [{
    "id" : "1", 
    "msg"   : "hi",
    "tid" : "2013-05-05 23:35",
    "fromWho": "hello1@email.se"
},
{
    "id" : "2", 
    "msg"   : "there",
    "tid" : "2013-05-05 23:45",
    "fromWho": "hello2@email.se"
}];

json.forEach((item) => {
  console.log('ID: ' + item.id);
  console.log('MSG: ' + item.msg);
  console.log('TID: ' + item.tid);
  console.log('FROMWHO: ' + item.fromWho);
});

Answer 4

var arr = [
  {
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "hello1@email.se"
  }, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
  }
];

pour faciliter la mise en œuvre de la méthode forEach.

arr.forEach(function(item){
  console.log('ID: ' + item.id);
  console.log('MSG: ' + item.msg);
  console.log('TID: ' + item.tid);
  console.log('FROMWHO: ' + item.fromWho);
});

Answer 5

Puisque j'ai déjà commencé à m'y intéresser :

var data = [{
    "id": "1",
    "msg": "hi",
    "tid": "2013-05-05 23:35",
    "fromWho": "hello1@email.se"
}, {
    "id": "2",
    "msg": "there",
    "tid": "2013-05-05 23:45",
    "fromWho": "hello2@email.se"
}]

Et cette fonction

var iterateData =function(data){   for (var key in data) {
       if (data.hasOwnProperty(key)) {
          console.log(data[key].id);
       }
    }};

Vous pouvez l'appeler comme ceci

iterateData(data); // write 1 and 2 to the console

Mise à jour après le commentaire d'Eric

Comme eric a souligné a for in boucle pour un tableau peut avoir des résultats inattendus . La question référencée comporte une longue discussion sur les avantages et les inconvénients.

Test avec for(var i ...

Mais il semble que la suite soit tout à fait sûre :

for(var i = 0; i < array.length; i += 1)

Bien qu'un test en chrome ait donné le résultat suivant

var ar = [];
ar[0] = "a"; 
ar[1] = "b";
ar[4] = "c";

function forInArray(ar){ 
     for(var i = 0; i < ar.length; i += 1) 
        console.log(ar[i]);
}

// calling the function
// returns a,b, undefined, undefined, c, undefined
forInArray(ar); 

Test avec .forEach()

Au moins dans chrome 30, cela fonctionne comme prévu

var logAr = function(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
ar.forEach(logAr); // returns a[0] = a, a[1] = b, a[4] = c

Liens

• voir for in au mdn
• le nouveau forEach méthode
• un commentaire qui indique que la compréhension des tableaux rend for in moins mauvais
• Compréhension des tableaux introduit avec javascript 1.7 dans firefox 2 (oui 2)