JSON — stringify et parse

Quand tu veux sauvegarder des paramètres ou le contenu d'un panier dans le navigateur, ou les envoyer à un serveur, un objet ne peut pas être transmis tel quel : seule une chaîne peut être sauvegardée ou transmise.

Une fois converti en JSON (un format de données qui représente des paires clé-valeur sous forme de chaîne), il peut être sauvegardé directement, et le destinataire peut le reconvertir en l'objet de départ. Cet article couvre JSON.stringify, qui effectue cette conversion, et JSON.parse, qui fait le chemin inverse.

Transformer un objet en chaîne — JSON.stringify

Pour sauvegarder ou envoyer un objet, il faut d'abord le transformer en chaîne. Si tu l'assembles toi-même avec quelque chose comme "{" + key + ":" + value + "}", tout casse dès qu'une valeur contient un guillemet. Mieux vaut donc passer par une fonction qui produit un format normalisé.

Si tu écris JSON.stringify(settings), l'objet est converti en une chaîne d'une seule ligne, au format JSON. Ce qui revient est une chaîne : typeof renvoie donc "string", et les méthodes de chaîne comme length et includes s'appliquent directement dessus.

JSON ressemble beaucoup à la façon dont on écrit du JavaScript, mais ce n'est pas la même chose. Les clés doivent toujours être entourées de guillemets doubles, et les valeurs de type chaîne n'acceptent elles aussi que des guillemets doubles.

Le format interdit la virgule finale, et il n'accepte pas non plus les commentaires. C'est précisément cette différence qui provoque la SyntaxError abordée plus loin.

const product = { name: "Café filtre", price: 780, inStock: true };

const productJson = JSON.stringify(product);
console.log(productJson);
// {"name":"Café filtre","price":780,"inStock":true}

// Ce qui revient est une chaîne, donc les méthodes de chaîne marchent directement
console.log(typeof productJson);            // string
console.log(productJson.includes("price")); // true

// Les tableaux se convertissent de la même façon
console.log(JSON.stringify(["Cuisine", "Papeterie"]));  // ["Cuisine","Papeterie"]

Convertis les paramètres d'une application en une chaîne qui puisse être sauvegardée. settings est déjà déclaré.

① Convertis settings en chaîne JSON et affiche-la.

② Affiche le type de ce que tu as obtenu en ①.

③ Affiche le nombre de caractères de ce que tu as obtenu en ①.

④ Affiche si ce que tu as obtenu en ① contient le mot theme.

(Si tout s'exécute correctement, une explication apparaîtra.)

Rendre ça lisible — indenter avec un troisième argument

Une chaîne JSON tassée sur une seule ligne convient au transport, mais elle devient difficile à lire dès que tu veux en vérifier le contenu à l'œil. Avec des sauts de ligne et une indentation, c'est bien plus simple d'écrire un fichier de configuration ou de vérifier le comportement au fil du développement.

Si tu passes un nombre en 3e argument, comme dans JSON.stringify(order, null, 2), tu obtiens une chaîne multi-lignes indentée de ce nombre d'espaces. Le 2e argument sert à choisir les clés à extraire ; passe null pour tout produire tel quel.

Même mis en forme, ce qui revient est toujours une chaîne : tu peux donc la découper en lignes avec split("\n"). "\n" est la notation d'un saut de ligne.

const product = { name: "Café filtre", price: 780 };

// Passe 2 comme 3e argument pour indenter de 2 espaces
const pretty = JSON.stringify(product, null, 2);
console.log(pretty);
// {
//   "name": "Café filtre",
//   "price": 780
// }

// Même formaté, ce qui revient est une chaîne
console.log(typeof pretty);              // string
console.log(pretty.split("\n").length);  // 4

Écris une commande dans une mise en forme assez lisible pour être collée directement dans un fichier de configuration. order est déjà déclaré.

① Affiche le nombre de caractères de la commande une fois convertie sans indentation.

② Convertis-la avec une indentation de 2 espaces, et affiche-la telle quelle.

③ Affiche combien de lignes compte le résultat de ②.

④ Affiche seulement la 2e ligne du résultat de ②.

Reconvertir une chaîne en objet — JSON.parse

Une chaîne sauvegardée, ou reçue d'un serveur, ne se lit pas telle quelle avec quelque chose comme order.total. Pour en extraire des valeurs ou faire des calculs dessus, il faut qu'elle redevienne un objet.

Si tu écris JSON.parse(savedJson), la chaîne JSON est lue et un objet est construit puis renvoyé. Les nombres reviennent sous forme de nombres et les booléens sous forme de booléens : un calcul comme order.total + 1000 fonctionne donc directement.

Les tableaux reviennent eux aussi sous forme de tableaux, et length en compte les entrées.

Si tu passes une chaîne qui ne respecte pas le format JSON, une SyntaxError survient et l'exécution s'arrête sur cette ligne. C'est le cas avec une virgule finale en trop, une clé non entourée de guillemets, ou une chaîne coupée en plein milieu.

const savedJson = '{"name":"Café filtre","price":780,"tags":["Cuisine"]}';

const product = JSON.parse(savedJson);
console.log(product.name);           // Café filtre

// Les nombres reviennent comme des nombres, donc les calculs fonctionnent simplement
console.log(product.price * 2);      // 1560

// Les tableaux reviennent comme des tableaux
console.log(product.tags.length);    // 1
console.log(typeof product);         // object

// Faire l'aller-retour redonne le même contenu
console.log(JSON.stringify(product) === savedJson);  // true

Reconvertis une chaîne de commande sauvegardée en un objet exploitable. savedJson est déjà déclaré.

① Reconvertis la chaîne en objet, et affiche le numéro de commande.

② Affiche le total augmenté de 1000.

③ Affiche le nombre d'articles.

④ Affiche le type de l'objet que tu as obtenu.

Une chaîne reçue peut être mal formée

Il suffit d'une connexion coupée en plein milieu, ou d'un fichier de configuration édité à la main où traîne une virgule parasite, pour que JSON.parse lève une SyntaxError et s'arrête sur cette ligne. Une fois l'exécution arrêtée, plus rien ne tourne derrière : pars donc du principe que reconvertir en objet une chaîne venue de l'extérieur peut échouer.

La façon d'écrire du code qui continue malgré un échec est traitée dans l'article sur la gestion des exceptions.

Le code fourni essaie de reconvertir en objet une chaîne où traîne une virgule finale parasite. Exécute-le tel quel, et regarde jusqu'où l'affichage va et sur quel message il s'arrête.

Ce qui se perd dans l'aller-retour — undefined et Date

JSON ne sait représenter que des chaînes, des nombres, des booléens, null, des tableaux et des objets. Si tu convertis un objet contenant un autre type de valeur, celle-ci disparaît silencieusement ou est remplacée par autre chose.

C'est de là que vient l'écart quand tu sauvegardes un objet et que tu le relis avec moins de champs qu'au départ.

Une propriété dont la valeur est undefined est supprimée dès la conversion, clé comprise. Une propriété dont la valeur est une fonction disparaît de la même façon. Un undefined situé à l'intérieur d'un tableau est, lui, remplacé par null, afin de conserver sa position.

Date (une valeur intégrée qui représente une date et une heure ; non traitée dans ce cours) est convertie en chaîne. Elle reste également une chaîne après JSON.parse : elle ne redevient pas une date exploitable.

Si tu as besoin de t'en servir ensuite comme d'une date, reconstruis-la toi-même avec new Date(chaîne).

const record = {
  orderId: "ORD-1477",
  couponCode: undefined,
  orderedAt: new Date("2026-09-02T09:00:00Z"),
  tags: ["Cuisine", undefined],
};

const json = JSON.stringify(record);
console.log(json);
// {"orderId":"ORD-1477","orderedAt":"2026-09-02T09:00:00.000Z","tags":["Cuisine",null]}

const restored = JSON.parse(json);
console.log("couponCode" in restored);   // false (supprimée, clé comprise)
console.log(typeof restored.orderedAt);  // string (ne revient pas comme une Date)
console.log(restored.tags[1]);           // null (devenue null dans le tableau)