JS如何循环解析嵌套JSON并获取指定嵌套对象属性值

你的代码出现问题主要有两个核心原因，咱们一步步拆解并修复：

错误点拆解 #

1. 最外层JSON结构是数组：你解析后的response是一个数组（注意JSON开头的[），所以直接访问response.Prizes会返回undefined，必须先取数组的第一个元素才能拿到里面的Prizes属性。
2. User是单个对象而非数组：Prizes[0].User是一个包含FirstName和SecondName的对象，不是数组，所以不能用数组的forEach方法遍历它。

正确的解析与取值代码 #

场景1：只取第一个奖品的用户信息 #

const response = JSON.parse(this.responseText);
// 先获取数组中的第一个数据项
const dataItem = response[0];
// 获取第一个奖品对象
const targetPrize = dataItem.Prizes[0];
// 直接访问User的属性
const firstName = targetPrize.User.FirstName; // 结果是"John"
const secondName = targetPrize.User.SecondName; // 结果是"Doe"

// 如果要渲染到页面
const output = `<li>${firstName} ${secondName}</li>`;
// 后续可以把output插入到对应的DOM元素中

场景2：遍历所有奖品的用户信息（如果Prizes数组有多个元素） #

const response = JSON.parse(this.responseText);
const dataItem = response[0];
let output = '';

// 遍历Prizes数组（这才是正确的遍历对象，因为Prizes是数组）
dataItem.Prizes.forEach(prize => {
  output += `<li>${prize.User.FirstName} ${prize.User.SecondName}</li>`;
});

// 插入到DOM，比如：
// document.getElementById('user-list').innerHTML = output;

为什么原代码会报错？ #

• response.Prizes[0]：response是数组，没有Prizes属性，必须先通过response[0]获取数组内的对象，再访问它的Prizes属性。
• User.forEach(...)：forEach是数组的专属方法，而User是单个对象，直接访问它的属性即可，不需要遍历。

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