JavaScript boucle à travers le tableau json?


151

J'essaie de parcourir 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"
}

Et 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 n'obtiens que la première partie, les valeurs id 1.

Des idées?


Y a-t-il des crochets manquants? Cela ne ressemble plus vraiment à un tableau, maintenant. Et avez-vous analysé le JSON?
Denys Séguret

est-ce un tableau d'objets? (vous manquez [] ou ils ne sont pas là?)
lpiepiora

9
Ce n'est ni JSON ni array.
JJJ


Veuillez changer le titre, c'est pour parcourir les propriétés d'un objet JSON, pas un tableau
Sites Web Taylored

Réponses:


222

Votre JSON devrait ressembler à 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"
}];

Vous pouvez faire une boucle sur le tableau comme ceci:

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

    console.log(obj.id);
}

Ou comme ceci (suggéré par Eric) soyez prudent avec le support IE

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

11
Ou plus brièvement,json.forEach(function(obj) { console.log(obj.id); });
Eric

4
Sauf sur IE8 (comme d'habitude, tout le monde sauf IE;))
lpiepiora

4
Je pense que cet exemple peut prêter à confusion, car var json n'est pas un objet JSON, mais un tableau. Dans ce cas, .forEach fonctionne bien, mais lorsque vous utilisez un objet json, cela ne fonctionne pas.
mpoletto

27

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/


16
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"
  }
];

forEach pour une mise en œuvre facile.

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

16

essaye ça

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);
});

10

Depuis que 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);
       }
    }};

Tu peux l'appeler comme ça

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

Mettre à jour après le commentaire Erics

Comme Eric l'a souligné, une for inboucle pour un tableau peut avoir des résultats inattendus . La question référencée a une longue discussion sur les avantages et les inconvénients.

Tester avec for (var i ...

Mais il semble que le suivant soit tout à fait sauvé:

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

Bien qu'un test dans Chrome ait eu 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); 

Tester 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


2
-1 - les for ... in boucles ne doivent pas être utilisées pour les tableaux
Eric

Utilisation des compréhensions de tableau for each. for ... in ...est une construction de langage pour énumérer les clés d'objet dans un ordre arbitraire. Ce n'est pas la bonne construction pour un tableau.
Eric

9

Ça fonctionne. Je viens d'ajouter des crochets aux données JSON. Les données sont:

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 la boucle est:

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

6

Il doit s'agir d'un tableau si vous souhaitez effectuer une itération dessus. Vous avez très probablement disparu [et ].

var x = [{
    "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"
}];

var $output = $('#output');
for(var i = 0; i < x.length; i++) {
    console.log(x[i].id);
}

Découvrez ce jsfiddle: http://jsfiddle.net/lpiepiora/kN7yZ/


5

Un peu tard mais j'espère pouvoir aider les autres: D

votre json doit ressembler à quelque chose que Niklas a déjà dit. Et puis voilà:

for(var key in currentObject){
        if(currentObject.hasOwnProperty(key)) {
          console.info(key + ': ' + currentObject[key]);
        }
   }

si vous avez un tableau multidimensionnel, voici votre code:

for (var i = 0; i < multiDimensionalArray.length; i++) {
    var currentObject = multiDimensionalArray[i]
    for(var key in currentObject){
            if(currentObject.hasOwnProperty(key)) {
              console.info(key + ': ' + currentObject[key]);
            }
       }
}

3

Eh bien, tout ce que je peux voir, c'est que vous avez deux objets JSON, séparés par une virgule. Si les deux étaient à l'intérieur d'un tableau ( [...]), cela aurait plus de sens.

Et, s'ils sont à l'intérieur d'un tableau, alors vous utiliseriez simplement le type de boucle standard "for var i = 0 ...". En l'état, je pense qu'il va essayer de récupérer la propriété "id" de la chaîne "1", puis "id" de "hi", et ainsi de suite.


2

Une solution courte utilisant mapet une fonction flèche

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"
}];
data.map((item, i) => console.log('Index:', i, 'Id:', item.id));

Et pour couvrir les cas où la propriété "id"n'est pas présente, utilisez filter:

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"
}, {
  "msg": "abcde",
  "tid": "2013-06-06 23:46",
  "fromWho": "hello3@email.se"
}];

data.filter(item=>item.hasOwnProperty('id'))
                .map((item, i) => console.log('Index:', i, 'Id:', item.id));


0

oh mon ... pourquoi tout le monde rend cela si difficile !!?

votre extrait de code doit être un peu développé, et il doit en être ainsi pour être correctement json. remarquez que j'inclus juste l'attribut de nom de tableau "item"

{"item":[
{
  "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"
}]}

votre script java est simplement

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.