JavaScript通过JSON数组循环?


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?
DenysSéguret13年

它是对象数组吗?(您是否缺少[]或它们不在那里?)
lpiepiora

9
它既不是JSON也不是数组。
JJJ


请更改标题,这是为了遍历JSON对象属性,而不是数组
Taylored网站

Answers:


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); });
埃里克

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

爱立信评论后更新

正如埃里克指出一个for in用于阵列环可以具有意想不到的效果。所提到的问题对利弊进行了长时间的讨论。

用for(var i ...

但是看来,这是相当节省的:

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

尽管使用chrome进行的测试具有以下结果

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

至少在chrome 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 eachfor ... in ...是一种用于以任意顺序枚举对象键的语言构造。那不是数组的正确构造。
埃里克

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

有点晚了,但我希望我可以帮助别人:D

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

您的Java脚本很简单

var objCount = json.item.length;
for ( var x=0; x < objCount ; xx++ ) {
    var curitem = json.item[x];
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.