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

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?


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


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

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

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

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/


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

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

16

Spróbuj tego

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

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

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

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


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

A pętla to:

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

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

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


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

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.


2

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

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

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

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

Twój skrypt java jest po prostu

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.