Pętla JavaScript przez tablicę JSON?

151

Próbuję przejść przez następującą tablicę 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]"
}

I wypróbowałem następujące rozwiązania

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

Ale z jakiegoś powodu otrzymuję tylko pierwszą część, wartości id 1.

Jakieś pomysły?

Alosyius
źródło
Czy brakuje jakichś nawiasów? Teraz tak naprawdę nie wygląda jak tablica. Czy przeanalizowałeś JSON?
Denys Séguret
czy jest to tablica obiektów? (brakuje ci [] czy ich tam nie ma?)
lpiepiora
9
To nie jest JSON ani tablica.
JJJ
3
Możliwy duplikat pętli Loop przez tablicę w JavaScript
Heretic Monkey
Zmień tytuł, ma to na celu iterację po właściwościach obiektu JSON, a nie tablicy
Taylored Web Sites

Odpowiedzi:

222

Twój JSON powinien wyglądać tak:

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

Możesz wykonać pętlę po tablicy w następujący sposób:

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

    console.log(obj.id);
}

Lub w ten sposób (sugerowane przez Erica) bądź ostrożny z obsługą IE

json.forEach(function(obj) { console.log(obj.id); });
Niklas
źródło
11
Lub bardziej zwięźle,json.forEach(function(obj) { console.log(obj.id); });
Eric
4
Chyba że na IE8 (jak zwykle wszyscy oprócz IE;))
lpiepiora
4
Myślę, że ten przykład może być mylący, ponieważ var json nie jest obiektem JSON, ale tablicą. W tym przypadku .forEach działa dobrze, ale gdy używasz obiektu json, nie działa.
mpoletto
27

W Twoim kodzie jest kilka problemów, najpierw Twój json musi wyglądać następująco:

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

Następnie możesz iterować w ten sposób:

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

I daje doskonały efekt.

Zobacz skrzypce tutaj: http://jsfiddle.net/zrSmp/

Mroczny rycerz
źródło
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]"
  }
];

forEach dla łatwej implementacji.

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
źródło
16

Spróbuj tego

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
źródło
10

Ponieważ już zacząłem się tym zajmować:

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

I ta funkcja

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

Możesz to tak nazwać

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

Aktualizacja po komentarzu Ericsa

Jak Eric wskazał pętla macierzy może nieoczekiwane rezultaty . Przywoływane pytanie zawiera długą dyskusję na temat zalet i wad.for in

Test z for (var i ...

Ale wygląda na to, że następująca sytuacja jest całkiem bezpieczna:

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

Chociaż test w chromie dał następujący wynik

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

Testuj z .forEach()

Przynajmniej w Chrome 30 działa to zgodnie z oczekiwaniami

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

Spinki do mankietów

surfmuggle
źródło
2
-1 - for ... in pętle nie powinny być używane dla tablic
Eric
Stosowanie wyrażeń tablicowych for each. for ... in ...jest konstrukcją językową służącą do wyliczania kluczy obiektów w dowolnej kolejności. To nie jest właściwa konstrukcja dla tablicy.
Eric
9

To działa. Właśnie dodałem nawiasy kwadratowe do danych JSON. Dane to:

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

A pętla to:

for (var key in data) {
   if (data.hasOwnProperty(key)) {
         alert(data[key].id);
   }
} 
Shyam Shinde
źródło
6

Musi to być tablica, jeśli chcesz ją iterować. Najprawdopodobniej brakuje ci [i ].

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

Sprawdź to jsfiddle: http://jsfiddle.net/lpiepiora/kN7yZ/

lpiepiora
źródło
5

Trochę późno, ale mam nadzieję, że pomogę innym: D

twój json musi wyglądać jak coś, co już powiedział Niklas. A potem zaczynasz:

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

jeśli masz tablicę wielowymiarową, to jest twój kod:

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
źródło
3

Widzę tylko, że masz dwa obiekty JSON oddzielone przecinkami. Gdyby obydwa znajdowały się wewnątrz tablicy ( [...]), miałoby to większy sens.

A jeśli SĄ one wewnątrz tablicy, używałbyś po prostu standardowej pętli typu „for var i = 0 ...”. W tej chwili wydaje mi się, że spróbuje pobrać właściwość „id” ciągu „1”, a następnie „id” z „hi” i tak dalej.

Katana314
źródło
2

Krótkie rozwiązanie wykorzystujące mapi funkcję strzałki

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

Oraz w przypadkach, gdy nieruchomość "id"nie jest obecna, użyj 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
źródło
0

ojej ... dlaczego wszyscy tak to utrudniają !!?

Twój fragment danych musi zostać trochę rozszerzony i tak musi być, aby był poprawnym jsonem. zauważ, że po prostu dołączam atrybut nazwy tablicy „item”

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

Twój skrypt java jest po prostu

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
Robb Penoyer
źródło