如何使用JavaScript遍历API返回的嵌套JSON对象？

API返回的JSON结构如下：

{
"data": [
{
  "ActionNeeded": null,
  "OldestStatus": null,
  "ServiceHost": "W501",
  "ServiceName": "Renewals",
  "ServiceStatusDateTime": "2023-03-15T22:47:05.313000",
  "ServiceVersion": "1.0.0",
  "SortOrder": "0",
  "TimeAgo": null
},
{
  "ActionNeeded": null,
  "OldestStatus": null,
  "ServiceHost": "W202",
  "ServiceName": "Monitor",
  "ServiceStatusDateTime": "2023-03-15T22:46:42.560000",
  "ServiceVersion": null,
  "SortOrder": "1",
  "TimeAgo": null
},
{
  "ActionNeeded": null,
  "OldestStatus": null,
  "ServiceHost": "W0070204",
  "ServiceName": "Monitor",
  "ServiceStatusDateTime": "2023-03-15T22:46:39.840000",
  "ServiceVersion": "2.0.2",
  "SortOrder": "1",
  "TimeAgo": null
}
]
}

当前尝试的代码仅能获取数组索引，无法遍历每个对象的键值对：

var json_obj = JSON.parse(event.data);

// Returned records
const items = json_obj['data'];

for (var item_index in items) {
    if (items.hasOwnProperty(item_index)) {
        console.log(item_index);
    }
}

解决方案 #

要遍历每组数据并输出对应的键和值，需要两层遍历：先遍历data数组里的每个对象，再遍历每个对象内部的键值对。以下是几种可行的实现方式：

方法1：for...of + Object.entries（推荐） #

用for...of遍历数组更直观，Object.entries()可直接提取对象的键值对数组：

const json_obj = JSON.parse(event.data);
const items = json_obj.data;

// 遍历数组中的每个服务对象
for (const item of items) {
    console.log('--- 服务信息分割线 ---');
    // 遍历当前对象的所有键值对
    for (const [key, value] of Object.entries(item)) {
        console.log(`${key}: ${value}`);
    }
}

方法2：传统for循环 + for...in（兼容旧环境） #

如果需要适配低版本JavaScript环境，可使用传统循环结合for...in：

const json_obj = JSON.parse(event.data);
const items = json_obj.data;

// 遍历数组索引
for (let i = 0; i < items.length; i++) {
    const item = items[i];
    console.log('--- 服务信息分割线 ---');
    // 遍历对象的每个键
    for (const key in item) {
        if (item.hasOwnProperty(key)) {
            console.log(`${key}: ${item[key]}`);
        }
    }
}

方法3：数组forEach方法（简洁函数式写法） #

用数组的forEach方法实现更简洁的遍历：

const json_obj = JSON.parse(event.data);
json_obj.data.forEach(item => {
    console.log('--- 服务信息分割线 ---');
    Object.entries(item).forEach(([key, value]) => {
        console.log(`${key}: ${value}`);
    });
});

以上方法都会输出每个服务对象的所有键和对应的值，包含null类型的字段。

内容的提问来源于stack exchange，提问作者Source Matters