JavaScript 循环遍历 JSON 数组?

IT技术 javascript json
2021-02-09 14:13:10

我正在尝试遍历以下 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 值。

有任何想法吗?

6个回答

您的 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); });
我认为这个例子可能会令人困惑,因为 var json 不是一个 JSON 对象,而是一个数组。在这种情况下, .forEach 运行良好,但是当您使用 json 对象时,它不起作用。
2021-03-28 14:13:10
除非在 IE8 上(像往常一样,除了 IE 之外的所有人;))
2021-04-01 14:13:10
或者更简洁地说, json.forEach(function(obj) { console.log(obj.id); });
2021-04-09 14:13:10

您的代码中存在一些问题,首先您的 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/

试试这个

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

因为我已经开始研究它:

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)

虽然在 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

链接

数组推导式使用for each. for ... in ...是一种以任意顺序枚举对象键的语言结构。这不是数组的正确构造。
2021-04-02 14:13:10
-1 -for ... in 循环不应用于数组
2021-04-03 14:13:10