JSON en JavaScript
La page d’avant ne faisait que changer la forme de l’appel, et this suivait cet appel. Ici, on laisse ce sujet de côté. Le produit est encore en mémoire, nom et prix posés sur l’objet. Pour confier les mêmes faits à un fichier, à un autre programme ou à une page suivante, il faut un texte au format convenu. Ce texte s’appelle JSON.
L’objet vivant n’est pas cette note
Tant que le script tourne, le littéral reste là et une méthode peut s’y poser ; this dépend encore de l’appel, comme dans la leçon précédente. JSON n’est qu’une chaîne : pas de méthodes, et il ne choisit pas this.
Ce que le texte a le droit de contenir
📊 Objet vivant contre texte JSON
| Pièce | Littéral d’objet | Texte JSON |
|---|---|---|
| Guillemets de la clé | facultatifs | guillemets doubles obligatoires |
| Guillemets du texte | simples ou doubles | doubles seulement |
| Virgule finale | permise | interdite |
| Fonction | peut être une méthode | stringify l’omet ; tapée dans le texte, elle est illégale |
| Champ undefined | une vraie valeur | omis quand stringify parcourt l’objet |
N’importe pas dans ce texte les habitudes du littéral. Chaque clé et chaque chaîne exigent des guillemets doubles. Une virgule en trop, un commentaire dans le texte et une fonction nue ne sont pas du JSON valide. Le tableau dit quelle habitude disparaît et laquelle parse refuse tout court.
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));
stringify écrit la note
JSON.stringify parcourt les champs simples et renvoie une chaîne ; la console affiche {"name":"Mug","price":12} et product ne bouge pas. Le nom se lit encore sur l’objet vivant, et tu obtiens Mug. La chaîne est une valeur à part, que tu peux enregistrer ou envoyer.
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);
parse fabrique une valeur à partir de la note
text reste une chaîne, guillemets et accolades compris. JSON.parse construit un objet neuf à partir de ce texte. Ensuite product.name vaut Mug. Aucune méthode n’est appelée ici, et this n’entre pas en jeu.
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);
Une liste peut loger dans la note
Le texte JSON peut porter un tableau ; après parse, product.tags est un vrai tableau et la première case vaut ceramic. Le tableau comme sujet à part vient ensuite, et ici il n’est que du chargement dans le texte.
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));
La note garde les données, pas le comportement
price valait undefined. tag était une fonction. Les deux sortent du texte. L’affichage se limite à {"name":"Mug"}. Le comportement reste sur l’objet vivant et n’entre pas dans la note.
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}
Une note bâclée ne se lit pas
Les guillemets simples et une clé sans guillemets sont permis dans un littéral et interdits en JSON ; JSON.parse lance donc une erreur et le catch affiche bad text au lieu de faire tomber cette démo. Corrige le texte avec des guillemets doubles sur la clé et sur la chaîne. Ce n’est pas encore la leçon sur les erreurs, seulement la preuve qu’un JSON cassé arrête parse.
La direction indique l’outil
De la mémoire vers le texte, tu passes par stringify, et du texte vers la valeur tu reviens avec parse. S’il te faut ensuite une fonction sur le produit, tu l’ajoutes après parse, parce que la note ne l’a pas apportée. this dépend encore de l’appel et non de JSON, et la leçon suivante porte sur les tableaux : une liste vivante dans le script, pas une règle JSON de plus.
Montre un champ tiré de la note
Lis une petite chaîne de produit avec parse. Écris le nom dans le paragraphe. Ne construis pas l’objet avec des accolades dans le script.
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>
Le paragraphe affiche Mug, parce que le script n’a fait que lire du texte et n’a pas bâti de littéral. Change le nom dans la chaîne et recharge pour que la ligne suive.
Étapes d’exercice
- Applique stringify à la tasse et lis le texte entre guillemets, puis parse de la même forme pour voir
Mug. - Lis la note qui contient
tagset récupèreceramic. - Applique stringify à un objet qui a une méthode et un prix
undefinedpour ne garder quenamedans le texte, et place une note à clé nue danstry/catchjusqu’à lirebad text. - Dans la démo HTML, change seulement le nom dans la chaîne, recharge et lis le paragraphe.
Glissements fréquents
- Prendre le texte JSON pour un littéral, et donner à
parsedes guillemets simples ou une clé nue - Compter sur une méthode ou sur
undefinedpour survivre àstringify - Appeler
parsealors que tu voulais du texte, oustringifyalors que le texte était déjà là, puis lire le nom sur la chaîne au lieu de la valeur renvoyée parparse - Croire que la page suivante est encore du JSON, alors que les tableaux sont une liste vivante
À retenir
- JSON est un texte qui décrit des données, et
stringifytransforme un objet simple en ce texte parseramène le texte à une valeur- La clé et la chaîne exigent des guillemets doubles ; une virgule finale ou des guillemets simples font échouer
parse - Les méthodes et les champs
undefinedsortent du texte - Un champ lu peut remplir une ligne de la page, et la suite ce sont les tableaux, une liste vivante dans le script
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut