How to display looped elements in html - es6-promise

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), []);