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

Question

I have an API I'm trying to fetch and display data from. The data I want to access is in the 'equipments' array as shown below.

I'm trying to loop through the 'equipments' array for each item but I'm having trouble displaying the data. I believe I'm either not accessing it properly, or not including another loop somewhere.

Here's what I have so far:

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

Any idea what I need to do in order to get this working?

data.groups is an array, too!

chazsolo
– chazsolo

2021-09-01 13:09:24 +00:00
Commented Sep 1, 2021 at 13:09 — chazsolo
– chazsolo, Commented Sep 1, 2021 at 13:09

Rafael de Freitas · Accepted Answer · 2021-09-01 13:15:14Z

1

Since data.groups is an array, you first have to iterate through them before accessing the equipments.

You can also iterate through them using a forEach, so that's easy!

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

answered Sep 1, 2021 at 13:15

Rafael de Freitas

5114 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

leonllr · Accepted Answer · 2021-09-01 13:10:42Z

1

instead of groups.equipments use

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

answered Sep 1, 2021 at 13:10

leonllr

421 silver badge7 bronze badges

Comments

MrMythical · Accepted Answer · 2021-09-01 13:11:19Z

0

You are trying to get the equipments property of the array. The property is in the object which is inside the array.

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

answered Sep 1, 2021 at 13:11

MrMythical

9,1093 gold badges22 silver badges50 bronze badges

Comments

Baskovli · Accepted Answer · 2021-09-01 13:25:03Z

0

You have to make twice forEach. Check here https://js.do/code/621480

Data groups is array also, so you have to take foreach group then foreach product in equipments.

edited Sep 1, 2021 at 13:25

answered Sep 1, 2021 at 13:19

Baskovli

6606 silver badges15 bronze badges

Comments

JD Fill · Accepted Answer · 2021-09-02 10:21:40Z

0

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

edited Sep 2, 2021 at 10:21

JD Fill

4122 gold badges8 silver badges27 bronze badges

answered Sep 1, 2021 at 14:59

Sikder Mohammad Arif

11 bronze badge

1 Comment

Community Over a year ago

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related