I have a list of 3 product types on my product page. Each list has its own API. When the user clicks on a product for more details, the URLSearchparams kicks in and based on the product's ID, it's displayed on the screen. I've been able to make that work for only 1 list. It stopped working when I tried to copy and paste the code with a different API link. I'm therefore trying to consolidate my fetch requests with Promise.all but I'm stuck on how to apply an IF argument that would first confirm the product's ID and its list, and then launch the second ".then" part of the code. Been trying for a couple of days (I'm a beginner). Any help or suggestion is welcome. Thanks in advance.
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);
const idPres = product.has("_id");
console.log(idPres);
const nounours = fetch("http://localhost:3000/api/teddies/" + id);
nounours.then((response) => response.json());
console.log(nounours);
const cameras = fetch("http://localhost:3000/api/cameras/" + id);
cameras.then((response) => response.json());
console.log(cameras);
const furniture = fetch("http://localhost:3000/api/furniture/" + id);
furniture.then((response) => response.json());
console.log(furniture);
const getAll = async function () {
const results = await Promise.all([nounours, cameras, furniture]);
console
.log(results)
.then((product) => {
if (results == id) {
return `
<div class="produit__card__wrapper">
<div class="produit__card__content">
<img src="${product.imageUrl}" alt="${product.name}" class="productImg"></img>
<div class="container_text">
<h1 class="name"><span>${product.name}</span></h1>
<p class="price"><strong>Price : </strong><span>${product.price / 100 + " €"}</span></p>
<p class="description"><strong>Description : </strong><span>${product.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;
});
};
Aucun commentaire:
Enregistrer un commentaire