如何迭代JSON结构？

Question

我有以下的JSON结构：

[{ "id":"10", "class": "child-of-9" }, { "id": "11", "classd": "child-of-10" }]

我该如何使用JavaScript迭代它？

- Flueras Bogdan

---

https://dev59.com/jkjSa4cB1Zd3GeqPDC7E - Max

"jquery or javascript"? jquery 是用 javascript 编写的！ - AlikElzin-kilaka

应该是“jQuery或纯JavaScript”。 - Rasshu

“如何迭代JSON结构？”你不需要这样做。你需要解析它，然后你就没有JSON了，而是循环遍历生成的数组。 - T.J. Crowder

投票以重新开放此问题，因为在JavaScript中，虽然数组和对象相似，但它们之间存在差异，安全地循环遍历对象的属性比数组要困难得多。与关闭相关联的答案仅涵盖数组，可能需要指向不同的问题进行关闭，但目前链接到的答案对于此问题是不正确的。 - Barkermn01

Answer 1

var arr = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "class": "child-of-10"}];
    
for (var i = 0; i < arr.length; i++){
  document.write("<br><br>array index: " + i);
  var obj = arr[i];
  for (var key in obj){
    var value = obj[key];
    document.write("<br> - " + key + ": " + value);
  }
}

注意：for-in方法对于简单对象很棒。但在DOM对象中使用不太明智。

- Your Friend Ken

---

不要忘记在 for key in obj 循环中检查 obj.hasOwnProperty(key) --- 否则，如果有人扩展了原型，你可能会发现其他键正在进入 obj 中，而你并不想要它们。 - Funka

你好，我想问一下如果我想使用这个来获取远程的JSON数组，该怎么做呢？请给我一些指导！ - Hanzawa Naoki

@devios 那么使用 DOM 对象的聪明解决方案是什么？ - musicformellons

请参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of 以获取一种现代方法（不支持 IE）。 - devios1

永远不要使用for...in循环来枚举数组。 - Stephan Weinhold

Answer 2

摘自jQuery文档:

var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {
  $("#" + this).text("My id is " + this + ".");
  return (this != "four"); // will stop running to skip "five"
});

jQuery.each(obj, function(i, val) {
  $("#" + i).append(document.createTextNode(" - " + val));
});

- Marquis Wang

---

这是一个非常令人困惑的语法。您能否请解释一下？您也能提供输出结果吗？ - AlikElzin-kilaka

答案应该用 JavaScript，而不是 JQuery。 - Wayne Hartman

我理解您的观点，但原问题确实提到了“jQuery或JavaScript”。似乎错误在于该问题没有标记为jQuery标签。 - vlasits

同样地，lodash提供_.forEach（别名_.each以实现underscore兼容性）来完成相同的任务。 - Ville

OP要求使用jQuery或JavaScript，所以我认为这个答案是合适的。 - KWallace

这很令人困惑，因为在某个时候似乎问题已经被重写，不再提及jQuery了 ‍♂️ - paulkernfeld

Answer 3

使用 for...of：

var mycars = [{name:'Susita'}, {name:'BMW'}];

for (var car of mycars) 
{
  document.write(car.name + "<br />");
}

结果：

Susita
BMW

- AlikElzin-kilaka

---

Susita是一个与文化相关的变量，对吗？ :-) - GilShalit

没问题，"Right" 是一个顶层变量，像宝马一样 ;- ) - AlikElzin-kilaka

这是一个普通的数组，不是 JSON 格式。 - jonasespelita

适用于数组和JSON。 - AlikElzin-kilaka

未捕获的引用错误：i未定义 - behelit

Answer 4

如果不容易，请让我知道：

var jsonObject = {
  name: 'Amit Kumar',
  Age: '27'
};

for (var prop in jsonObject) {
  alert("Key:" + prop);
  alert("Value:" + jsonObject[prop]);
}

- abdulbasit

---

你的jsonObject不是一个真正的JSON对象，而是一个JavaScript对象。这就是为什么它能起作用的原因。但是如果有人有一个JSON对象，他可以将其转换为JS对象，然后使用你的方法。要将JSON对象转换为JS对象，请使用jsObject = JSON.parse(jsonObject); - prageeth

如果您是通过jQuery.getJSON()获取数据的，则这个方法可以正常工作。 - John Mee

Answer 5

如果这是你的dataArray：

var dataArray = [{"id":28,"class":"Sweden"}, {"id":56,"class":"USA"}, {"id":89,"class":"England"}];

那么：

$(jQuery.parseJSON(JSON.stringify(dataArray))).each(function() {  
         var ID = this.id;
         var CLASS = this.class;
});

- Swapnil Godambe

---

最佳答案使用JQuery。我使用AJAX从后端编码数据，因此没有使用'stringify'函数。代码清晰美观！ - danigonlinea

Answer 6

从http://www.w3schools.com复制并粘贴，没有必要增加JQuery的开销。

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
    text += person[x];
}

结果：John Doe 25

- Gerrit Brink

Answer 7

mootools 示例:

var ret = JSON.decode(jsonstr);

ret.each(function(item){
    alert(item.id+'_'+item.classd);
});

- Jason

Answer 8

你可以使用像objx这样的迷你库 - http://objx.googlecode.com/

你可以编写类似于以下代码：

var data =  [ {"id":"10", "class": "child-of-9"},
              {"id":"11", "class": "child-of-10"}];

// alert all IDs
objx(data).each(function(item) { alert(item.id) });

// get all IDs into a new array
var ids = objx(data).collect("id").obj();

// group by class
var grouped = objx(data).group(function(item){ return item.class; }).obj()

有更多的“插件”可用于处理这样的数据，参见http://code.google.com/p/objx-plugins/wiki/PluginLibrary

- Mat Ryer

Answer 9

使用递归函数可以检索嵌套对象：

function inside(events)
  {
    for (i in events) {
      if (typeof events[i] === 'object')
        inside(events[i]);
      else
      alert(events[i]);
    }
  }
  inside(events);

其中events是JSON对象。

- Fatima Zohra

---

很好。只是提一下，如果你读取（i）变量，你可以获取属性名称（如果有必要的话）。 - netfed

Answer 10

当使用jQuery时，Marquis Wang的方法可能是最好的答案。

在纯JavaScript中也有类似的解决方案，可以使用JavaScript的forEach方法。 forEach 接受一个函数作为参数，该函数将针对数组中的每个项目进行调用，并将该项目作为参数。

简单易懂：

var results = [ {"id":"10", "class": "child-of-9"}, {"id":"11", "classd": "child-of-10"} ];

results.forEach(function(item) {
    console.log(item);
});

- Fabien Snauwaert

---

不错的一行代码示例。可以在其上面添加箭头函数，如下所示-results.forEach((item) => console.log(item)); - quasar