如何使用JavaScript遍历JSON API对象中嵌套的多个数组

存在的问题&修复说明 #

• 层级访问错误：返回数据中 data.groups 是数组类型，无法直接读取 .equipments 属性，需要先遍历 groups 数组拿到每个分组对象，再遍历分组下的 equipments 数组获取单条设备数据
• 字段冗余访问：遍历到单条设备对象（product）后，无需再嵌套 equipments 层读取序列号，直接从 product 中取对应字段即可
• 属性值无引号问题：HTML属性值没有包裹引号，遇到带特殊字符的属性值会导致DOM结构异常
• 缺少错误捕获：没有处理接口请求失败、JSON解析异常等场景，不利于问题排查
• 图片路径适配：通常photos字段为数组类型，需根据实际结构取对应索引下的图片链接，代码中已做通用适配

修复后完整代码 #

// Fetch Data
function getData() {
  const dataOutput = document.getElementById('你的输出容器ID'); // 请替换为你实际的容器选择逻辑
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      let output = "";
      // 先遍历groups数组
      data.groups.forEach(function(group) {
        // 再遍历每个分组下的equipments数组
        group.equipments.forEach(function(product) {
          // 若photos不是数组，可去掉[0]直接取对应属性
          const imgSrc = product.photos?.[0]?.text || product.photos?.text || '默认占位图地址';
          output += `
            <div class="card">
              <img src="${imgSrc}" alt="${product.model}" />
              <h3>${product.year} ${product.manufacturer} ${product.model}</h3>
              <p>${product.hours} hours</p>
              <a href='https://used.battlefieldequipment.ca/en/${product["group-code"]}/${product["serial-number"]}' class="btn btn-primary">View Details</a>
            </div>         
          `;
        })
      });
      dataOutput.innerHTML = output;
    })
    .catch(err => {
      console.error('数据加载失败：', err);
      dataOutput.innerHTML = '<p>数据加载失败，请稍后重试</p>';
    })
}

getData();

额外排查建议 #

如果修改后仍无法正常展示，可在拿到data后先打印console.log(data)，核对返回数据的实际层级和字段名，避免接口返回字段和预期不一致的问题。

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