Bonjour à tous,

Je suis actuellement dans le chapitre "Sauvegardez les données dans le localStorage" du cours "Apprenez à créer des pages web dynamiques" de Thomas Kerbrat.

J'ai un problème avec le code suivant, extrait de la solution proposée à l'exercice de fin de chapitre : 

for(let i = 0; i < pieces.length; i++){
    const id = pieces[i].id;
    const avisJSON = window.localStorage.getItem(`avis-piece-${id}`);
    const avis = JSON.parse(avisJSON);

    if(avis !== null){
        const pieceElement = document.querySelector(`article[data-id="${id}"]`);
        afficherAvis(pieceElement, avis)
    }
}

La console de mon navigateur me renvoie l'erreur suivante : Uncaught SyntaxError: Unexpected token 'o', "[object Obj"... is not valid JSON at JSON.parse.

Après avoir cherché la solution sur le forum et sur la le web, je me résous à faire un appel à l'aide car je suis coincé.

Votre aide sera la bienvenue

Hello,

Que vaut id quand l'erreur arrive ? Avec cet id quelle est la valeur dans ton localstorage de "avis-piece-X" ? ou X est l'id dans ta boucle.

J'ai déjà ma petite idée de la réponse. Je pense que le soucis est plutôt lors de la sauvegarde dans le localstorage.

Bonjour quenti77 

Merci pour ta réponse rapide. J'ai suivi ton conseil et affiché la valeur id en console, ainsi que typeof id pour savoir à quoi on avait affaire. Résultat en sortie de console : 1 "number", 2 "number", etc. Enfin  pas tout à fait "etc.": la boucle s'arrêtait à id = 2 et donc l'erreur intervenait à partir de id = 3. Mystère. Mais là le mystère devient vraiment épais, c'est quand après avoir inséré puis supprimé les appels à console.log, tout est rentré dans l'ordre sans que je modifie le code incriminé 

Donc ça fonctionne... mais j'avoue que j'aurai du mal à classer cette discussion comme résolue. Tu en penses quoi ?

Re,

Le soucis ne viens pas forcément de la récupération de la valeur dans le code que tu présentes. Le soucis venait surement de comment la valeur à été enregistrer dans le localStorage. si tu écrits ceci :

localStorage.setItem('key-1', [{ name: 'Jean', age: 24 }])

Tu auras dans le localStorage ceci : "key-1" = "[object Object]"

Car la méthode setItem de l'objet localStorage essaye de convertir en chaîne de caractères ce que tu lui donne. Et donc faire un JSON.parse("[object Object]") n'est pas valide car ce n'est pas un json valide.

Pour résoudre le soucis il faut utiliser JSON.stringify sur la donnée à enregistrer comme tu faits JSON.parse sur la donner à récupérer.

Chose importante aussi pour plus tard mais le localStorage est modifiable par n'importe qui donc il ne faut pas faire confiance aux données à l'intérieur.

-
Edité par quenti77 28 novembre 2023 à 14:05:29

Re,

Je te remercie et je note précieusement tes conseils. Je passe le sujet en résolu.