Bonjour, je dois récupérer des données de produits qui ne se trouve pas dans le LS (par exemple le prix) pour que si un jour sont prix venez a changer, il ne soit pas afficher avec le prix précédent dans le panier. Je dois donc récupérer par une requête fetch ses données souhaité, hors je n'arrive pas a les intégrer dans ma page. Actuellement j'ai bien les données de mes produits présent dans le panier d'afficher ma console. Mais impossible d'en extraire le données. Voici mon code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 //Récuperation des produits dans le panier let productLocalStorage = JSON.parse(localStorage.getItem("Product")); //Intégration HTML + des données produit sur la page const parser = new DOMParser(); let productSection = document.getElementById("cart__items"); for (i = 0; i < productLocalStorage.length; i++) { let produitEnCours = fetch("http://localhost:3000/api/products/" + productLocalStorage[i].Id) .then((res) => { return res.json();}) .then((data) => console.table(data)); let productItem = ` <article class="cart__item" data-id="${productLocalStorage[i].Id}" data-color="${productLocalStorage[i].Color}"> <div class="cart__item__img"> <img src="${produitEnCours.imageUrl}" loading="lazy" alt="${produitEnCours.altTxt}"> </div> <div class="cart__item__content"> <div class="cart__item__content__description"> <h2>${produitEnCours.name}</h2> <p>${productLocalStorage[i].Color}</p> <p>${produitEnCours.price} </p> </div> <div class="cart__item__content__settings"> <div class="cart__item__content__settings__quantity"> <p>Qté : </p> <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="${productLocalStorage[i].Qty}"> </div> <div class="cart__item__content__settings__delete"> <p class="deleteItem">Supprimer</p> </div> </div> </div> </article>`; const htmlString = parser.parseFromString(productItem,"text/html"); productSection.appendChild(htmlString.body.firstChild); }
Partager