How to display looped elements in html

Question

Using the query string URLSearchparams and consolidating my fetch requests into the Promise.all method, my code is now able to print the elements that I want in the console.log. However, I'm having a hard time getting that information to display in html. It returns "undefined" on the screen but the console.log shows the correct data. What's missing ?

async function loadData() {
  const queryStr_id = window.location.search;
  console.log(queryStr_id);

  const product = new URLSearchParams(queryStr_id);
  console.log(product);

  const id = product.get("_id");
  console.log(id);

  try {
    const url_teddies = "http://localhost:3000/api/teddies/" + id;
    const url_cameras = "http://localhost:3000/api/cameras/" + id;
    const url_furniture = "http://localhost:3000/api/furniture/" + id;

    const results = await Promise.all([fetch(url_teddies), fetch(url_cameras), fetch(url_furniture)]);
    const dataPromises = results.map((result) => result.json());
    const finalData = await Promise.all(dataPromises);
    console.log(finalData);



    for (i = 0; i < finalData.length; i++) {
      const prodImg = finalData[i].imageUrl;
      const prodName = finalData[i].name;
      const prodPrice = finalData[i].price / 100 + " Eur";
      const prodDesc = finalData[i].description;
      const coloris = finalData[i].colors;
      const lenses = finalData[i].lenses;
      const varnish = finalData[i].varnish;
      console.log(prodImg);
      console.log(prodName);
      console.log(prodPrice);
      console.log(prodDesc);
      console.log(coloris);
      console.log(lenses);
      console.log(varnish);

      const productDetails = `
        <div class="produit__card__wrapper">
            <div class="produit__card__content">
                <img src="${finalData[i].imageUrl}" alt="${finalData[i].name}" class="productImg"></img>
              <div class="container_text">
                    <h1 class="name"><span>${finalData[i].name}</span></h1>
                    <p class="price"><strong>Price : </strong><span>${finalData[i].price / 100 + " €"}</span></p>
                    <p class="description"><strong>Description : </strong><span>${finalData[i].description}</span></p>
                <form>
                    <label for="product_color"></label>
                    <select name="product_color" id="product_color">
                    </select>
                </form>
                    <button id="addToCart" type="submit " name="addToCart">Ajouter au panier</button>
              </div>
            </div>
        </div>
            `;

    const container = document.querySelector(".container");
    container.innerHTML = productDetails;
    }

    return finalData;
  } catch (err) {
    console.log(err);
  }


}
loadData()

Answer 1

I think you just forgot to flatten your three promised arrays before assigning them to finalData. Try

const finalData = (await Promise.all(dataPromises)).reduce((data, arr) => data.concat(arr), []);