Récupération de données avec Requête fetch

Version imprimable

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:

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);
}

12/05/2022, 22h14
mathieu

je n'ai pas compris à quel endroit dans votre code vous n'avez pas les données que vous cherchez.

et si vous contactez le serveur à chaque affichage, le cache côté navigateur ne va pas aider. donc il ne serait pas plus simple de ne pas utiliser le cache et d'afficher directement les données qui viennent du serveur ?

Bonjour,

Citation:

Mais impossible d'en extraire le données.

fetch() est asynchrone et va donc te retourner une « promesse » ce que tu ne veux pas, tu veux le résultat.

Le résultat est donc disponible dans ton 2éme then
Code:

1 2 3 4 5 6 7 8 let produitEnCours = fetch("http://localhost:3000/api/products/" + productLocalStorage[i].Id) .then((res) => { return res.json(); }) .then((data) => { // le résultat est disponible ICI, c'est data console.table(data); });
tu ne peux donc pas affecter ce résultat à ta variable produitEnCours, il te faut traiter celui-ci dans le then, ou dans une fonction de rappel (callback).

Pour faire ce que tu souhaites il te faudrait utiliser le couple de mots clé async/await, pour attendre le résultat de fetch() donc englober ton code dans une fonction.

Exemple que j'ai sous la main :
Code:

1 2 3 4 5 6 7 8 9 10 11 async function getAwaitDatas(villes) { const result = []; for (let i = 0; i < villes.length; i += 1) { const url = urlSearch.replace("<ville>", villes[i]); data = await fetch(url) .then((response) => response.json()); // les données sont disponibles elemDestAwait.insertAdjacentHTML("beforeend", template(data[0])); } }
dans ce cas les requêtes attendent que la précédente soit résolue pour être exécutée, cela sera plus long, le script est bloqué.

Son équivalent en asynchrone :
Code:

1 2 3 4 5 6 7 8 9 10 function getAsyncDatas(villes) { for (let i = 0; i < villes.length; i += 1) { const url = urlSearch.replace("<ville>", villes[i]); fetch(url) .then((response) => response.json()) .then((data) => { elemDestAsync.insertAdjacentHTML("beforeend", template(data[0])); }); } }
dans ce cas les résultats peuvent arriver dans le désordre, mais c'est plus rapide.