React.js中如何遍历访问数组内的嵌套JSON对象

问题原因 #

你的代码返回空对象数组，核心是没正确处理数据里的嵌套数组结构：

• firms是数组类型（每个数据对象的firms都被[]包裹），直接访问d.firms._id会返回undefined，因为数组本身没有_id属性
• 即使拿到firms中的对象，它的_id和name也是数组类型，直接赋值无法获取实际值

正确实现方式 #

可以用forEach遍历，或者更简洁的map方法，正确逐层提取数组内的目标值：

方式1：forEach遍历

const vendorArray = [];
vendorList.forEach(function (d) {
  // 先取firms数组的第一个元素
  const firm = d.firms[0];
  vendorArray.push({
    id: firm._id[0], // 取_id数组的第一个元素
    name: firm.name[0] // 取name数组的第一个元素
  });
});

方式2：map方法（更简洁）

const vendorArray = vendorList.map(d => {
  const firm = d.firms[0];
  return {
    id: firm._id[0],
    name: firm.name[0]
  };
});

额外说明 #

如果firms数组可能包含多个企业对象，需要遍历firms数组来收集所有企业：

const vendorArray = [];
vendorList.forEach(function (d) {
  d.firms.forEach(firm => {
    vendorArray.push({
      id: firm._id[0],
      name: firm.name[0]
    });
  });
});

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