如何在html中显示循环元素

Question

使用查询字符串 URLSearchparams 并将我的 fetch 请求合并到 Promise.all 方法中，我的代码现在能够在 console.log 中打印我想要的元素。但是，我很难让这些信息显示在 html 中。它在屏幕上返回“未定义”，但 console.log 显示正确的数据。缺少什么？

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

我认为您只是忘记在将三个承诺的数组分配给finalData 之前将它们展平。试试

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