JavaScript et LocalStorage

Comment afficher des données issues d'un tableau JavaScript en HTML

Le début de votre fichier JavaScript ressemblera à ceci :


const data = {
  "products": [
    {
      "id": 1,
      "name": "T-shirt",
      "price": 10,
      "quantity": 1,
      "image": "https://picsum.photos/200/300?random=1"
    },
    {
      "id": 2,
      "name": "Pantalon",
      "price": 20,
      "quantity": 2,
      "image": "https://picsum.photos/200/300?random=2"
    },
    {
      "id": 3,
      "name": "Chaussures",
      "price": 30,
      "quantity": 1,
      "image": "https://picsum.photos/200/300?random=3"
    }
  ]
}

document.addEventListener('DOMContentLoaded', () => {

    //Le dom est chargé,  votre code ici...
    
});

Le plus pratique est de donner un id à votre tableau de votre panier, et de récupérer cet élément dans votre code JavaScript.

const panier = document.getElementById('panier');

Cette ligne devrait se trouver dans la partie tbody de votre tableau. On peut donc ajouter cette partie tbody à notre tableau (s'il n'en contient pas encore)

  const tbody = document.createElement('tbody')
  panier.appendChild(tbody)

Ensuite, vous pouvez parcourir les produits (products) des données json, et ajouter une ligne par produit.

data.products.forEach(product => {
    //Ajouter une ligne au tableau
});

Il vous reste ensuite à définir le code HTML qui va être généré pour chaque ligne de produit, et l'ajouter à votre tableau.

const tr = document.createElement('tr');
tr.innerHTML = `
    <td>...vos données pour un produit ...</td>
`;
tbody.appendChild(tr);

Travail à faire

Afficher les données dans votre page panier, à partir des données json.
Ajoutez toutes les parties nécessaires (total, TVA, ...)
Alimentez ces zones (en JavaScript) avec les éléments de votre panier (calculé le coût total du panier, la TVA (20%), ...)
Ajoutez tous les boutons et interactions nécessaires (supprimer un produit, modifier la quantité, ...)
Prenez le temps d'intégrer correctement l'ensemble des éléments et d'ajouter une barre de menu.
Pensez à l'ergonomie, l'accessibilité et l'UX de votre page

Pensez au formatage des données (dates, ...). Les fonctions JavaScript peuvent être très pratiques pour éviter de réécrire la même chose...

Stockage dans le localStorage

Actuellement, si vous actualisez votre page, tout est perdu. Ce n'est pas très pratique... Une solution simple consiste à stocker les informations dans le localStorage ou sessionStorage.

Les principales caractéristiques de localStorage sont les suivantes :
- Partagé entre tous les onglets et fenêtres d’une même origine.
- Les données n’expirent pas. Il reste après le redémarrage du navigateur et même le redémarrage du système d’exploitation.
L’objet sessionStorage est beaucoup moins utilisé que localStorage.
- Les propriétés et les méthodes sont les mêmes, mais c’est beaucoup plus limité :
- Le sessionStorage n’existe que dans l’onglet actuel du navigateur.
- Un autre onglet avec la même page aura un stockage différent.
- Mais il est partagé entre les iframes du même onglet (en supposant qu’ils proviennent de la même origine).
- Les données survivent à l’actualisation de la page, mais pas à la fermeture/ouverture de l’onglet.

Nous allons utiliser localStorage pour stocker les produits du panier. Les méthodes principales sont :

setItem(key, value) – stocke la paire clé/valeur.
getItem(key) – récupère la valeur par clé.
removeItem(key) – supprime la clé avec sa valeur.
clear() – supprime tout.
key(index) – récupère la clé sur une position donnée.
length – le nombre d’éléments stockés.

PrécédentOrganisation

Dernière mise à jour il y a 1 an

const data = { "products": [ { "id": 1, "name": "T-shirt", "price": 10, "quantity": 1, "image": "https://picsum.photos/200/300?random=1" }, { "id": 2, "name": "Pantalon", "price": 20, "quantity": 2, "image": "https://picsum.photos/200/300?random=2" }, { "id": 3, "name": "Chaussures", "price": 30, "quantity": 1, "image": "https://picsum.photos/200/300?random=3" } ] } document.addEventListener('DOMContentLoaded', () => { //Le dom est chargé, votre code ici... });