Loop de JavaScript através da matriz json?

151

Estou tentando fazer um loop pela seguinte matriz json:

{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
}

E tentei o seguinte

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

Mas, por alguma razão, estou recebendo apenas a primeira parte, os valores de id 1.

Alguma ideia?

Alosyius
fonte
Faltam suportes? Agora não parece realmente uma matriz. E você analisou o JSON?
Denys Séguret
é uma matriz de objetos? (faltam [] ou eles não estão lá?)
lpiepiora
9
Não é nem JSON nem matriz.
JJJ
3
Possível duplicado de loop através de uma matriz em JavaScript
Heretic Macaco
Altere o título, para iterar através das propriedades de um objeto JSON, não de uma matriz.
Taylored Web Sites

Respostas:

222

Seu JSON deve ficar assim:

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

Você pode fazer um loop sobre a matriz assim:

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

    console.log(obj.id);
}

Ou assim (sugerido por Eric), tenha cuidado com o suporte do IE

json.forEach(function(obj) { console.log(obj.id); });
Niklas
fonte
11
Ou de forma mais concisa,json.forEach(function(obj) { console.log(obj.id); });
Eric
4
A menos que no IE8 (como de costume, todos, mas IE;))
lpiepiora
4
Eu acho que esse exemplo pode ser confuso, porque var json não é um objeto JSON, mas uma matriz. Nesse caso, .forEach funciona bem, mas quando você usa um objeto json, ele não funciona.
Mpoletto
27

Existem alguns problemas no seu código, primeiro o seu json deve ter a seguinte aparência:

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

Em seguida, você pode iterar assim:

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

E dá resultado perfeito.

Veja o violino aqui: http://jsfiddle.net/zrSmp/

O Cavaleiro das Trevas
fonte
16
var arr = [
  {
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
  }, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
  }
];

método forEach para fácil implementação.

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

tente isso

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

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

Desde que eu já comecei a investigar:

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

E essa função

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

Você pode chamar assim

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

Atualizar após o comentário do Erics

Como Eric apontou, um for inloop para uma matriz pode ter resultados inesperados . A questão referenciada tem uma longa discussão sobre prós e contras.

Teste com for (var i ...

Mas parece que o seguinte é bastante salvo:

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

Embora um teste no chrome tenha o seguinte resultado

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

Teste com .forEach()

Pelo menos no chrome 30 isso funciona conforme o esperado

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

Ligações

surfmuggle
fonte
2
-1 - for ... in laços não devem ser utilizados para matrizes
Eric
Compreensões de matriz usam for each. for ... in ...é uma construção de linguagem para enumerar chaves de objeto em uma ordem arbitrária. Essa não é a construção correta para uma matriz.
Eric
9

Está funcionando. Acabei de adicionar colchetes aos dados JSON. Os dados são:

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

E o loop é:

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

Deve ser uma matriz se você deseja iterar sobre ela. Você provavelmente está desaparecido [e ].

var x = [{
    "id": "1",
        "msg": "hi",
        "tid": "2013-05-05 23:35",
        "fromWho": "[email protected]"
}, {
    "id": "2",
        "msg": "there",
        "tid": "2013-05-05 23:45",
        "fromWho": "[email protected]"
}];

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

Confira este jsfiddle: http://jsfiddle.net/lpiepiora/kN7yZ/

lpiepiora
fonte
5

Um pouco tarde, mas espero poder ajudar os outros: D

seu json precisa parecer algo que Niklas já disse. E então aqui vai:

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

se você tiver uma matriz multidimensional, este é o seu código:

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]);
            }
       }
}
Kami Yang
fonte
3

Bem, tudo o que vejo é que você tem dois objetos JSON, separados por vírgula. Se os dois estivessem dentro de uma matriz ( [...]), faria mais sentido.

E, se eles estiverem dentro de uma matriz, você usaria apenas o tipo de loop padrão "for var i = 0 ...". Como é, acho que ele tentará recuperar a propriedade "id" da string "1", depois "id" de "oi" e assim por diante.

Katana314
fonte
2

Uma solução curta usando mape uma função de seta

var data = [{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
}];
data.map((item, i) => console.log('Index:', i, 'Id:', item.id));

E para cobrir os casos em que a propriedade "id"não está presente, use filter:

var data = [{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
}, {
  "msg": "abcde",
  "tid": "2013-06-06 23:46",
  "fromWho": "[email protected]"
}];

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

user2314737
fonte
0

oh meu ... por que todo mundo faz isso tão difícil !!?

seu snippet de dados precisa ser expandido um pouco e deve ser desta maneira para ser o json adequado. observe que eu apenas incluo o atributo "item" do nome do array

{"item":[
{
  "id": "1",
  "msg": "hi",
  "tid": "2013-05-05 23:35",
  "fromWho": "[email protected]"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "[email protected]"
}]}

seu script java é simplesmente

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
Robb Penoyer
fonte