如何使用 JavaScript 在 JSON API 中的对象内循环多个数组答案

【问题标题】：How to loop through multiple arrays within objects in a JSON API using JavaScript如何使用 JavaScript 在 JSON API 中的对象内循环多个数组
【发布时间】：2021-10-30 23:47:14
【问题描述】：

我有一个 API，我正在尝试从中获取和显示数据。我要访问的数据在“设备”数组中，如下所示。

我正在尝试遍历每个项目的“设备”数组，但无法显示数据。我相信我要么没有正确访问它，要么没有在某处包含另一个循环。

这是我目前所拥有的：

// Fetch Data
function getData() {
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      let output = "";
      data.groups.equipments.forEach(function(product) {
        output += `
          <div class="card">
            <img src=${product.photos.text} 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.equipments["serial-number"]}' class="btn btn-primary">View Details</a>
          </div>         
      `;
      });
      dataOutput.innerHTML = output;
    })
}

getData();

知道我需要做什么才能使其正常工作吗？

【问题讨论】：

data.groups 也是一个数组！

标签： javascript arrays json object fetch-api

【解决方案1】：

代替groups.equipments使用

groups.map((g) => g.equipments)

【讨论】：

【解决方案2】：

您正在尝试获取数组的equipments 属性。该属性位于数组内的对象中。

data.groups.forEach(obj => {
  //obj.equipments is what you want now. It returns the equipments property of current object in the loop
})

【讨论】：

【解决方案3】：

由于data.groups 是一个数组，您首先必须在访问equipments 之前遍历它们。

您还可以使用forEach 遍历它们，这很简单！

data.groups.forEach(function(group) {
  group.equipments.forEach(product) {
    output += `
          <div class="card">
            <img src=${product.photos.text} 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.equipments["serial-number"]}' class="btn btn-primary">View Details</a>
          </div>`;
  }
})

【讨论】：

【解决方案4】：

你必须为每个做两次。在这里查看https://js.do/code/621480

数据组也是数组，所以你必须先取foreach组，然后再foreach设备中的产品。

【讨论】：

【解决方案5】：

 const loadApi = async () => {
    let url = await fetch(url)
    let res = await url.json();

    for (const element of res.groups) {
        for (const element2 of element.equipments) {
            getItemsFromProducts(element2);
        }
    }


}; loadApi();


const getItemsFromProducts = (data) => {
    let demo = document.getElementById('demo');
    demo.innerHTML = `
        <div id="product">
            <img src=${data.photos[0].text} alt=${data.model} />
            <h3>${data.year} ${data.manufacturer} ${data.model}</h3>
            <p>${data.hours} hours</p>
        </div>
    `;
}

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。