Блог

У меня есть 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 это массив, вам сначала нужно просмотреть их, прежде чем обращаться к equipments ним .

Вы также можете перебирать их с помощью a 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>`;
  }
}) 

вместо групп.оборудование использует

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

Вы пытаетесь получить equipments свойство массива. Свойство находится в объекте, который находится внутри массива.

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

Вы должны сделать два шага вперед. Проверьте здесь https://js.do/code/621480

Группы данных также являются массивом, поэтому вам нужно сначала выбрать группу, а затем продукт.

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