JSON 배열을 통한 JavaScript 루프?


151

다음 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"
}

그리고 다음을 시도했습니다

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

그러나 어떤 이유로 든 첫 번째 부분 인 id 1 값만 얻습니다.

어떤 아이디어?


누락 된 괄호가 있습니까? 실제로는 배열처럼 보이지 않습니다. 그리고 JSON을 구문 분석 했습니까?
Denys Séguret

그것은 객체의 배열입니까? (당신은 [실종] 또는이없는거야?)
lpiepiora

9
JSON도 아니고 배열도 아닙니다.
JJJ


제목을 변경하십시오. 이것은 배열이 아닌 JSON 객체 속성을 반복하는 것입니다.
Taylored 웹 사이트

답변:


222

JSON은 다음과 같아야합니다.

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

다음과 같이 배열을 반복 할 수 있습니다.

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

    console.log(obj.id);
}

또는 이와 같이 (Eric에서 제안한) IE 지원에주의하십시오.

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

11
더 간결하게,json.forEach(function(obj) { console.log(obj.id); });
Eric Eric

4
IE8이 아닌 한 (평소와 같이 IE 이외의 모든 사람))
lpiepiora

4
var json은 JSON 객체가 아니라 배열이기 때문에 예제가 혼동 될 수 있다고 생각합니다. 이 경우 .forEach는 잘 작동하지만 json 객체를 사용하면 작동하지 않습니다.
mpoletto

27

코드에 몇 가지 문제가 있습니다. 먼저 json이 다음과 같아야합니다.

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

다음과 같이 반복 할 수 있습니다.

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

그리고 그것은 완벽한 결과를 제공합니다.

여기에서 바이올린을보십시오 : 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 방법.

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

이 시도

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

내가 이미 살펴보기 시작한 이래 :

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

그리고이 기능

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

당신은 이것을 이렇게 부를 수 있습니다

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

에릭스 의견 후 업데이트

eric가 지적한 것처럼 배열 for in루프는 예상치 못한 결과를 초래할 수 있습니다 . 참조 된 질문에는 장단점에 대한 긴 토론이 있습니다.

for (var i ...로 테스트

그러나 다음과 같은 내용은 다음과 같습니다.

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

크롬 테스트 결과는 다음과 같습니다.

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

로 테스트 .forEach()

적어도 크롬 30에서는 예상대로 작동합니다.

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

연결


2
-1 - for ... in 루프는 배열을 사용해서는 안
에릭

배열 이해가 사용 for each됩니다. for ... in ...객체 키를 임의의 순서로 열거하기위한 언어 구성입니다. 그것은 배열에 대한 올바른 구성이 아닙니다.
Eric

9

작동 중입니다. 방금 대괄호를 JSON 데이터에 추가했습니다. 데이터는 다음과 같습니다

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

그리고 루프는 다음과 같습니다

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

6

반복하려면 배열이어야합니다. 당신은 가능성이 누락 [].

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

이 jsfiddle을 확인하십시오 : http://jsfiddle.net/lpiepiora/kN7yZ/


5

조금 늦었지만 다른 사람들을 도울 수 있기를 바랍니다.

당신의 json은 Niklas가 이미 말한 것처럼 보일 필요가 있습니다. 그리고 여기 당신은 간다 :

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

다차원 배열을 사용하는 경우 다음 코드입니다.

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

글쎄, 내가 볼 수있는 것은 쉼표로 구분 된 두 개의 JSON 객체가 있다는 것입니다. 둘 다 배열 ( [...]) 안에 있다면 더 의미가 있습니다.

그리고 그것들이 배열 안에 있다면, 표준 "for var i = 0 ..."유형의 루프를 사용하고있을 것입니다. 그대로, 문자열 "1"의 "id"속성을 검색 한 다음 "hi"의 "id"등을 검색하려고합니다.


2

map화살표 기능을 사용하는 짧은 해결책

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

그리고 재산 "id"이 존재하지 않는 경우를 다루기 위해 사용 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

오 마이 ... 왜 다들 이렇게 힘들게합니까?!

데이터 스 니펫을 약간 확장해야하며 올바른 JSON이되도록이 방법이어야합니다. 배열 이름 속성 "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"
}]}

당신의 자바 스크립트는 간단합니다

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.