如何对给定JSON对象的itens对象数组执行for each遍历读取属性

你编写的遍历逻辑本身语法是正确的，遍历失败大概率是以下两个常见原因：

• 你拿到的原始内容还是JSON字符串，没有转换为可操作的JavaScript对象
• 遍历执行时机不对，在异步请求返回前就执行了遍历，此时itensJson还未被正确赋值

完整可运行代码 #

方式1：jQuery $.each 写法（和你原有写法兼容） #

// 第一步：确保JSON字符串已解析为JS对象
// 如果是接口返回的原始字符串，先执行JSON.parse
const rawJsonStr = `{
  "test": "test1",
  "itens": [{
      "id": 1,
      "name": "TEST1",
      "value": 10
    },
    {"id": 2,"name": "TEST2","value": 20},
    {"id": 3,"name": "TEST3","value": 30},
    {"id": 4,"name": "TEST4","value": 40},
    {"id": 5,"name": "TEST5","value": 50},
    {"id": 6,"name": "TEST6","value": 60},
    {"id": 7,"name": "TEST7","value": 70}
  ]
}`;
const itensJson = JSON.parse(rawJsonStr);

// 第二步：遍历输出属性
$.each(itensJson.itens, function (index, item) {
  alert("name: " + item.name + "，value: " + item.value);
});

如果你是用jQuery的$.ajax请求数据，只需要设置dataType: "json"，jQuery会自动帮你完成JSON解析，不需要手动调用JSON.parse

方式2：原生JS写法（无需依赖jQuery） #

现在更推荐用原生数组的forEach方法实现遍历，不需要引入jQuery：

// 确保itensJson是已解析的JS对象
itensJson.itens.forEach(function(item) {
  alert("name: " + item.name + "，value: " + item.value);
});
// 箭头函数简写版本
itensJson.itens.forEach(item => alert(`name: ${item.name}，value: ${item.value}`));

内容的提问来源于stack exchange，提问作者Julio César