JavaScript bucle a través de json array


151

Estoy tratando de recorrer la siguiente 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"
}

Y he intentado lo siguiente

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

Pero por alguna razón solo estoy obteniendo la primera parte, los valores de id 1.

¿Algunas ideas?


¿Hay algunos paréntesis faltantes? Realmente no parece una matriz, ahora. ¿Y analizaste el JSON?
Denys Séguret

¿Es un conjunto de objetos? (¿Te falta [] o no están allí?)
lpiepiora

9
No es ni JSON ni matriz.
JJJ


Por favor cambia el título, esto es de repetición de un JSON las propiedades del objeto, no una matriz
Taylored sitios web

Respuestas:


222

Su JSON debería verse así:

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

Puede recorrer la matriz de esta manera:

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

    console.log(obj.id);
}

O así (sugerido por Eric) tenga cuidado con el soporte de IE

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

11
O más concisamentejson.forEach(function(obj) { console.log(obj.id); });
Eric

44
A menos que en IE8 (como siempre, todos menos IE;))
lpiepiora

44
Creo que ese ejemplo puede ser confuso, porque var json no es un objeto JSON, sino una matriz. En este caso, .forEach funciona bien, pero cuando usa un objeto json, no funciona.
mpoletto

27

Hay algunos problemas en su código, primero su json debe verse así:

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

A continuación, puede iterar así:

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

Y da un resultado perfecto.

Vea el violín aquí: 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"
  }
];

Cada método para una fácil implementación.

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

prueba esto

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

Como ya comencé a investigarlo:

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

Y esta funcion

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

Puedes llamarlo así

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

Actualización después del comentario de Erics

Como Eric señaló, un for inbucle para una matriz puede tener resultados inesperados . La pregunta referenciada tiene una larga discusión sobre pros y contras.

Prueba con for (var i ...

Pero parece que lo siguiente es bastante seguro:

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

Aunque una prueba en cromo tuvo el siguiente 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); 

Prueba con .forEach()

Al menos en Chrome 30, esto funciona como se esperaba

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

Enlaces


2
-1 - los for ... in bucles no deben usarse para matrices
Eric

Matriz de comprensión de uso for each. for ... in ...es una construcción de lenguaje para enumerar claves de objeto en un orden arbitrario. Esa no es la construcción correcta para una matriz.
Eric

9

Está funcionando. Acabo de agregar corchetes a los datos JSON. Los datos son:

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

Y el bucle es:

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

6

Debe ser una matriz si desea iterar sobre ella. Es muy probable que te falte [y ].

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

Echa un vistazo a este jsfiddle: http://jsfiddle.net/lpiepiora/kN7yZ/


5

Un poco tarde pero espero poder ayudar a otros: D

tu json debe verse como algo que Niklas ya dijo. Y luego aquí tienes:

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

Si tiene una matriz multidimensional, este es su 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

Bueno, todo lo que puedo ver allí es que tienes dos objetos JSON, separados por una coma. Si ambos estuvieran dentro de una matriz ( [...]) tendría más sentido.

Y, si ESTÁN dentro de una matriz, simplemente estaría utilizando el tipo de bucle estándar "for var i = 0 ...". Tal como está, creo que intentará recuperar la propiedad "id" de la cadena "1", luego "id" de "hola", y así sucesivamente.


2

Una solución corta usando mapy una función de flecha

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

Y para cubrir los casos en que la propiedad "id"no 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 mi ... ¿por qué todos hacen esto tan difícil?

su fragmento de datos debe expandirse un poco, y tiene que ser así para que sea el json adecuado. observe que acabo de incluir el atributo de nombre de matriz "elemento"

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

tu script java es simplemente

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.