Discussion :

[Olympien59]

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

[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 ?

[NoSmoking]

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.