CODEWITHSUNDEEP
javascriptcallbackaddeventlistenerforeach-object
fdoss
fdoss

Reputation: 25

How to call an array that was defined within a callback?

I need to figure out how to call an array of objects that was defined in a callback function. I am trying to use the array of objects for a forEach loop to display and add each object to the desired div in the HTML as its looping through .

This is what I tried after the const fetchProducts was defined. In the HTML File, there is a button with class 'fetch-products' and div with class 'product-container'.

document.querySelector('button.fetch-products').addEventListener("click", function() {
  
  fetchProducts.foreach(function(item){
    document.querySelector('div.product-container').innerHTML = item;
  });
});

I got an error saying Uncaught TypeError: fetchProducts.foreach is not a function.

Here is where the array of objects is called

const fetchProducts = (callback) => {
  setTimeout(() => {
    callback([
      {
        brand: "Converse",
        productName: "Chuck Taylor All Star Hi Top Sneaker",
        image:
          "https://www.famousfootwear.com/blob/product-images/20000/69/92/4/69924_right_medium.jpg",
        price: 59.99,
        badge: "NEW"
      },
      {
        brand: "Nike",
        productName: "Lebron Witness V Basketball Shoe",
        image:
          "https://www.famousfootwear.com/blob/product-images/20000/50/18/9/50189_right_medium.jpg",
        price: 99.99
      },
      {
        brand: "Crocs",
        productName: "Women's Classic Clog",
        image:
          "https://www.famousfootwear.com/blob/product-images/20000/99/02/0/99020_right_medium.jpg",
        price: 49.99,
        badge: "NEW"
      },
      {
        brand: "Vans",
        productName: "Women's Asher Slip On Sneaker",
        image:
          "https://www.famousfootwear.com/blob/product-images/20000/51/17/3/51173_right_medium.jpg",
        price: 54.99,
        badge: "ONLINE ONLY"
      }
    ]);
  }, 200);
};

Upvotes: 0

Views: 45

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85151

To use the code you've shown you will need to call fetchProducts, and pass it in a callback function. The forEach will go inside that callback (and it needs the correct capitalization of the "E"). For example:

fetchProducts(products => {
  products.forEach(item => {
    document.querySelector('div.product-container').innerHTML = item;
  });
})

this was helpful, but I am only getting a return of [object Object] in the div now.

That's happening because you're truing to put an arbitrary object onto the page, which isn't something supported. You either need to put just text on the page (like you did with item.price or item.brand), or you need to construct more complex dom elements. For example:

item => {
  const container = document.createElement('div');
  const title = document.createElement('h2');
  title.innerHTML = item.brand
  container.appendChild(title);
  document.querySelector('div.product-container').appendChild(container);
  document.querySelector('div.product-container').append(item.price)
}

If i do item.price or item.brand for instance , its only showing me the last object info instead of the info for all 4 items. Shouldn't the for each loop through and complete the function for each item?

That is happening because when you set innerHTML you overwrite whatever's there currently. So you start the loop and set innerHTML to the first item. Then you overwrite innerHTML with the second item. The last item will be the only one to stick.

If you want to add instead of overwrite, consider using appendChild, as in my above example

Upvotes: 2

Related Questions