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.