JavaScript

Le format JSON : JSON.stringify et JSON.parse

0 chapitres 0 QCM Accès gratuit

À propos de ce cours

Le format JSON : JSON.stringify et JSON.parse. Dans cette leçon du cours JavaScript, vous apprendrez à : comprendre à quoi sert le format JSON ; convertir un objet en texte avec JSON.stringify ; relire un texte JSON avec JSON.parse et gérer les erreurs ; connaître les limites du format (fonctions, dates, undefined).

Chapitre 9 — Les objets littéraux, JSON et les collections · Le format JSON : JSON.stringify et JSON.parse

🎯 Objectifs de la leçon
• comprendre à quoi sert le format JSON ;
• convertir un objet en texte avec JSON.stringify;
• relire un texte JSON avec JSON.parse et gérer les erreurs ;
• connaître les limites du format (fonctions, dates, undefined).

1. Un format d'échange universel

Un objet n'existe que dans la mémoire du programme. Pour l'enregistrer (fichier, localStorage) ou l'envoyer (à un serveur, à une autre application), il faut le transformer en texte. Le format JSON (JavaScript Object Notation) reprend la syntaxe des objets JavaScript avec des règles plus strictes ; il est compris par presque tous les langages (PHP, Python, Java…) et c'est le format de la plupart des API web (chapitre 19).

JSON.stringify et JSON.parse
Figure 1 — Les deux conversions, et les règles du format.

const contact = {
  nom: "Salma Idrissi",
  age: 22,
  actif: true,
  telephones: ["0612345678", "0522112233"],
  adresse: { ville: "Rabat" },
  dateInscription: new Date(Date.UTC(2026, 8, 7)),
  motDePasse: undefined,
  saluer() { return "Bonjour"; },
};

// 1. Objet → texte JSON
const texte = JSON.stringify(contact);
console.log(texte);
console.log("typeof texte :", typeof texte, "| longueur :", texte.length);

// 2. Texte JSON lisible : indentation de 2 espaces
console.log(JSON.stringify({ nom: contact.nom, adresse: contact.adresse }, null, 2));

// 3. Ne garder que certaines propriétés
console.log(JSON.stringify(contact, ["nom", "age"]));

// 4. Texte JSON → objet
const recu = '{"produit":"Clavier","prix":249,"disponible":true,"tags":["usb","azerty"]}';
const objet = JSON.parse(recu);
console.log(objet.produit, objet.prix + 1, objet.tags.length);

// 5. Les dates reviennent sous forme de texte : on les reconvertit
const relu = JSON.parse(texte);
console.log("typeof relu.dateInscription :", typeof relu.dateInscription, "→", new Date(relu.dateInscription).getFullYear());

// 6. Un JSON invalide provoque une erreur : toujours l'attraper
for (const essai of ["{nom: 'Amina'}", '{"nom": "Amina",}', '{"nom": "Amina"}']) {
  try {
    console.log("OK  :", JSON.parse(essai));
  } catch (e) {
    console.log("ERREUR :", essai, "→", e.name);
  }
}

// 7. Copier un objet simple via JSON (et ses limites)
const copie = JSON.parse(JSON.stringify({ a: 1, b: [2, 3] }));
console.log("copie :", copie);

Résultat dans la console

{"nom":"Salma Idrissi","age":22,"actif":true,"telephones":["0612345678","0522112233"],"adresse":{"ville":"Rabat"},"dateInscription":"2026-09-07T00:00:00.000Z"}
typeof texte : string | longueur : 159
{
  "nom": "Salma Idrissi",
  "adresse": {
    "ville": "Rabat"
  }
}
{"nom":"Salma Idrissi","age":22}
Clavier 250 2
typeof relu.dateInscription : string → 2026
ERREUR : {nom: 'Amina'} → SyntaxError
ERREUR : {"nom": "Amina",} → SyntaxError
OK  : { nom: 'Amina' }
copie : { a: 1, b: [ 2, 3 ] }

2. Ce qu'il faut retenir des exemples

JSON.stringify(objet) renvoie une chaîne. La méthode saluer et motDePasse: undefined ont disparu ; la date est devenue un texte au format ISO.
JSON.stringify(objet, null, 2) indente le texte pour le rendre lisible ; un tableau de clés en deuxième argument ne garde que ces propriétés.
JSON.parse(texte) recrée un objet. Les dates restent des chaînes : reconvertissez-les avec new Date(…).
Des guillemets simples, des clés sans guillemets ou une virgule finale rendent le texte invalide: JSON.parse lance une SyntaxError. Toute donnée venant de l'extérieur doit être lue dans un try…catch (leçon 7.5).

ℹ️ À retenir
• JSON.stringify(o, null, 2): objet → texte ; JSON.parse(t): texte → objet.
• Guillemets doubles obligatoires, pas de virgule finale, pas de commentaire.
• Fonctions et undefined disparaissent ; les dates deviennent du texte.
• JSON.parse toujours dans un try…catch pour des données externes.

🛠 Activité 5 — Sauvegarder et restaurer une partie

Mission : Un jeu enregistre l'état d'une partie : joueur, niveau, score, inventaire (tableau), date de sauvegarde et une méthode ajouterPoints.

Questions pour avancer (répondez dans votre compte rendu, puis appliquez dans votre projet) :

Convertissez l'état en JSON et affichez le texte. Quelles propriétés ont disparu ou changé de type ? Pourquoi ?
Affichez une version indentée. Dans quel cas utiliseriez-vous la version compacte, et dans quel cas la version indentée ?
Relisez le texte avec JSON.parse. Essayez d'appeler ajouterPoints sur l'objet relu : que se passe-t-il ? Comment restaurer le comportement ?
Reconvertissez la date de sauvegarde en objet Date et affichez « Sauvegardé il y a … minutes ».
Écrivez une fonction chargerPartie(texte) qui renvoie l'état, ou un état neuf si le texte est vide ou invalide. Testez avec trois textes invalides différents.
Validez le JSON obtenu sur un site de validation (par exemple jsonlint). Introduisez une erreur volontaire et lisez le message.

Je vérifie / je rends :

☐ Les fonctions sauvegarderPartie et chargerPartie, et la réponse à la question 3.

← La déstructuration et l'opérateur spread sur les objetsLes collections Map et Set →

Sommaire du cours JavaScript

Télécharger ce cours en PDF 0

Le format JSON : JSON.stringify et JSON.parse

Dans cet article

09- Les objets littéraux, JSON et les collections

Sommaire du cours

Autres catégories