Navigating through various arrays within objects on a JSON API with JavaScript: A walkthrough

Question

Navigating through various arrays within objects on a JSON API with JavaScript: A walkthrough

I am currently working on fetching and displaying data from an API. The specific data I am interested in is located within the 'equipments' array. You can see an example of this array in the image linked below:

https://i.sstatic.net/QeBhc.jpg

My challenge lies in looping through the 'equipments' array for each item and properly displaying the data. I suspect that I may not be accessing it correctly or that I am missing an additional loop somewhere in my code.

Here is the code snippet that I have been working on:

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

Does anyone have any suggestions on how I can troubleshoot and resolve this issue?

javascript arrays json object fetch-api

Answer 1

Answer №1

To access the equipments within the data.groups array, make sure to iterate through each group first.

An easy way to accomplish this is by using the forEach method.

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 2

To access the equipments within the data.groups array, make sure to iterate through each group first.

An easy way to accomplish this is by using the forEach method.

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 3

Answer №2

Try switching from using groups.equipments to

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

Answer 4

Try switching from using groups.equipments to

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

Answer 5

Answer №3

To access the equipments property of the array, you need to retrieve it from an object within the array.

data.groups.forEach(item => {
  //item.equipments will give you the equipments property of the current object in the loop
})

Answer 6

To access the equipments property of the array, you need to retrieve it from an object within the array.

data.groups.forEach(item => {
  //item.equipments will give you the equipments property of the current object in the loop
})

Answer 7

Answer №4

To properly iterate through the data groups, you will need to use nested forEach loops. You can see an example of this in action by visiting this link.

Remember, the data groups are stored in an array, so you will need to iterate through each group and then iterate through each product in the equipment list.

Answer 8

To properly iterate through the data groups, you will need to use nested forEach loops. You can see an example of this in action by visiting this link.

Remember, the data groups are stored in an array, so you will need to iterate through each group and then iterate through each product in the equipment list.

Answer 9

Answer №5

 const fetchData = async () => {
    let apiUrl = await fetch(apiUrl)
    let response = await apiUrl.json();

    for (const group of response.groups) {
        for (const equipment of group.equipments) {
            displayProducts(equipment);
        }
    }
}; fetchData();

const displayProducts = (data) => {
    let displayElement = document.getElementById('display');
    displayElement.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>
    `;
}

Answer 10

 const fetchData = async () => {
    let apiUrl = await fetch(apiUrl)
    let response = await apiUrl.json();

    for (const group of response.groups) {
        for (const equipment of group.equipments) {
            displayProducts(equipment);
        }
    }
}; fetchData();

const displayProducts = (data) => {
    let displayElement = document.getElementById('display');
    displayElement.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>
    `;
}

Navigating through various arrays within objects on a JSON API with JavaScript: A walkthrough

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The URL in an AJAX request includes a repeating fragment due to a variable being passed within it

The confusion surrounding navigation in Angular's single-page applications

JQuery addClass function not functioning properly when used in conjunction with an AJAX request

Tips on utilizing jQuery or JavaScript to efficiently filter out outcomes exceeding a specified range

Function for querying database is not executing in an asynchronous manner

Using the symbols '&', '>', and '*' in the styling of React components

Guide for creating a CORS proxy server that can handle HTTPS requests with HTTP basic authentication

Improve the way you manage return statements

Unable to dial phone numbers when clicking 'Click to call' link on Android devices

The table fails to refresh after adding, modifying, or removing a row

Vue - Pull out several components from main file

Generating dynamic links in HTML

Stylus mistakenly fetches styl files from an incorrect directory

Is there a way to execute two files concurrently in JavaScript using node.js?

React ES6 SystemJS encountered an unforeseen token error that couldn't be caught

What is the best way to extract a single image from JSON data using AngularJS?

Unable to edit the current value of an input component in ReactJS

What method can be used to incorporate expressions into Handlebars partials when dealing with parameters?

Exploring the applications of the `this` keyword within a jQuery-based JavaScript object

Verify the operation within a pop-up box using ruby watir