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": "hello1@email.se"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
}

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?


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


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": "hello1@email.se"
},
{
    "id" : "2", 
    "msg"   : "there",
    "tid" : "2013-05-05 23:45",
    "fromWho": "hello2@email.se"
}];

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

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": "hello1@email.se"
},
{
"id" : "2", 
"msg"   : "there",
"tid" : "2013-05-05 23:45",
"fromWho": "hello2@email.se"
}];

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/


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

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

16

tente isso

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

Desde que eu já comecei a investigar:

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

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


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": "hello1@email.se" 
    }, 
    { 
        "id": "2", 
        "msg": "there", 
        "tid": "2013-05-05 23:45", 
        "fromWho": "hello2@email.se"
    }
]

E o loop é:

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

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

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


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

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.


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

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": "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 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": "hello1@email.se"
}, {
  "id": "2",
  "msg": "there",
  "tid": "2013-05-05 23:45",
  "fromWho": "hello2@email.se"
}]}

seu script java é simplesmente

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.