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

Question

我有一个 API 我正在尝试从中获取和显示数据。我要访问的数据位于 'equipments' 数组中，如下所示。

我试图为每个项目遍历 'equipments' 数组，但我无法显示数据。我相信我要么没有正确访问它，要么没有在某处包含另一个循环。

这是我目前的情况：

// 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();

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

Answer 1

而不是 groups.equipments 使用

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

Answer 2

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

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

Answer 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>`;
  }
})

Answer 4

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

数据组也是数组，所以你必须先取foreach group，然后取foreach product in equipments。

Answer 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>
    `;
}

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

How to loop through multiple arrays within objects in a JSON API using JavaScript

javascript

arrays

json

object

fetch-api