JSON en JavaScript : Lire et Manipuler

Syntaxe, JSON.parse, JSON.stringify, fetch + JSON, localStorage — le format universel des API

Sections

20+

Exemples

ES5+

Standard

📚 Navigation

🏠 Hub Programmation
⚡ Cours JavaScript
🌐 Fetch API
🧩 Destructuring

📋 Sommaire

1. C'est quoi JSON ?
6. JSON et fetch
2. Syntaxe JSON
7. JSON et localStorage
3. JSON.parse()
8. Erreurs fréquentes
4. JSON.stringify()
9. Questions fréquentes
5. Options avancées

SECTION 01

C'est quoi JSON ?

📄 JavaScript Object Notation

JSON est un format texte pour échanger des données. C'est le format standard des API web — quand tu appelles une API, elle te renvoie du JSON. C'est aussi utilisé pour les fichiers de configuration (package.json, tsconfig.json…).

// Ça ressemble à un objet JavaScript, mais c'est du TEXTE

JSON est indépendant du langage. Il est utilisé par Python, Java, PHP, Go, Ruby… C'est la lingua franca des données sur le web.

SECTION 02

Syntaxe JSON : les règles

Type	Exemple JSON	Note
String	« bonjour »	Guillemets doubles uniquement
Number	42, 3.14, -10	Pas de NaN, Infinity, 0x…
Boolean	true, false	Minuscules
Null	null	undefined n'existe pas en JSON
Array	[1, « a », true]	Types mixtes OK
Object		Clés toujours entre guillemets doubles

🚫 Ce qui n'existe PAS en JSON

// ❌ Interdit en JSON

SECTION 03

JSON.parse() — texte → objet

JSON.parse() convertit une chaîne JSON en objet JavaScript utilisable :

const jsonString = '';

const user = JSON.parse(jsonString);
console.log(user.nom); // « Alice »
console.log(user.age); // 25
typeof user; // « object »

// Tableaux
const arr = JSON.parse('[1, 2, 3]');
console.log(arr[0]); // 1

// ⚠️ JSON invalide → erreur
JSON.parse(« pas du json »); // ❌ SyntaxError
JSON.parse(« »); // ❌ guillemets simples

🛡️ Parse sécurisé avec try/catch

function safeParse(str)

safeParse(''); //
safeParse(« nope »); // null (pas de crash)

Entoure toujours JSON.parse() d'un try/catch quand le JSON vient d'une source externe (API, localStorage, utilisateur). Le JSON peut être invalide ou corrompu.

SECTION 04

JSON.stringify() — objet → texte

JSON.stringify() convertit un objet JavaScript en chaîne JSON :

const user = ;

const json = JSON.stringify(user);
console.log(json); // ''
typeof json; // « string »

// JSON « pretty print » — indenté et lisible
const pretty = JSON.stringify(user, null, 2);
//

⚠️ Ce que stringify ignore

const obj = ;

JSON.stringify(obj);
// ''

Les fonctions, undefined, Symbols sont silencieusement ignorés. Les Date sont converties en string ISO. Les Map/Set deviennent des objets vides. Si tu as besoin de sérialiser ces types, utilise un replacer custom.

SECTION 05

Options avancées

🔧 Le replacer (stringify) et le reviver (parse)

// REPLACER — contrôler ce qui est sérialisé

// Avec un tableau : sélectionner les clés
const user = ;
JSON.stringify(user, [« nom », « age »]);
// '' — motDePasse exclu

// Avec une fonction : transformer les valeurs
JSON.stringify(user, (key, value) => );

// REVIVER — transformer les valeurs au parse
const json = '';

const data = JSON.parse(json, (key, value) => );

data.createdAt instanceof Date; // true

📋 Deep clone avec JSON

// Cloner profondément un objet (hack classique)
const original = ;
const clone = JSON.parse(JSON.stringify(original));

clone.b.c = 99;
original.b.c; // 2 — l'original n'est pas modifié

// ⚠️ Limites : perd les Date, fonctions, undefined, Map, Set…
// Alternative moderne (2022+) :
const clone2 = structuredClone(original); // gère Date, Map, Set…

structuredClone() (2022) est la méthode moderne pour le deep clone. Elle gère Date, Map, Set, ArrayBuffer, etc. Utilise le hack JSON uniquement si tu cibles d'anciens environnements.

SECTION 06

JSON et fetch

🌐 Le cas d'usage principal

// LIRE du JSON depuis une API (GET)
async function getUsers()

// ENVOYER du JSON à une API (POST)
async function createUser(user)

createUser();

response.json() est un raccourci pour JSON.parse(await response.text()). Il retourne une Promise — n'oublie pas le await. Voir notre fiche Fetch API.

SECTION 07

JSON et localStorage

localStorage ne stocke que des strings. Pour stocker des objets ou tableaux, tu dois les convertir en JSON :

// STOCKER un objet
const settings = ;
localStorage.setItem(« settings », JSON.stringify(settings));

// LIRE et parser
const raw = localStorage.getItem(« settings »);
const parsed = raw ? JSON.parse(raw) : null;

// Pattern complet avec valeur par défaut
function loadSettings()

// STOCKER un tableau
const cart = [, ];
localStorage.setItem(« cart », JSON.stringify(cart));

SECTION 08

Erreurs fréquentes

Erreur	Problème	Solution
Oublier JSON.stringify() dans localStorage	L'objet est stocké comme « [object Object] »	Toujours JSON.stringify avant setItem
Pas de try/catch sur JSON.parse()	Crash si le JSON est invalide	Toujours entourer d'un try/catch
Guillemets simples dans le JSON	SyntaxError	JSON exige des guillemets doubles
Virgule traînante (trailing comma)	SyntaxError	Pas de virgule après le dernier élément
Stocker des Date en JSON	Converties en string ISO, pas restaurées au parse	Utilise un reviver pour recréer les Date
Double stringify	JSON.stringify(JSON.stringify(obj)) = string échappée	Stringify une seule fois

SECTION 09

Questions fréquentes

Quelle différence entre un objet JavaScript et du JSON ?

Un objet JS est une structure en mémoire — il peut contenir des fonctions, des Date, des Symbol, etc. Le JSON est du texte — il ne supporte que strings, numbers, booleans, null, arrays et objects. JSON.stringify convertit un objet en texte JSON, JSON.parse fait l'inverse.

Peut-on mettre des commentaires dans un JSON ?

Non, la spécification JSON interdit les commentaires. C'est pourquoi des alternatives existent : JSON5 (supporte commentaires et trailing commas) et JSONC (JSON with Comments, utilisé par VS Code dans ses fichiers de config). Mais les API web utilisent du JSON standard.

JSON.parse vs response.json() — quelle différence ?

response.json() est une méthode de l'API Fetch qui lit le corps de la réponse comme texte et le parse en JSON en une seule étape. C'est un raccourci pour JSON.parse(await response.text()). Elle retourne une Promise.

Comment deep clone un objet sans perdre les Date ?

Utilise structuredClone(obj) (disponible depuis 2022 dans tous les navigateurs modernes et Node.js 17+). Il gère les Date, Map, Set, ArrayBuffer, RegExp et les références circulaires — tout ce que le hack JSON.parse(JSON.stringify()) ne supporte pas.

📚 Fiches JavaScript liées

🌐 Fetch API
⏳ Promesses & async/await
🧩 Destructuring
🔤 let, const, var
📦 Tableaux
⚡ Cours JavaScript complet
🏠 Hub Programmation

JSON en JavaScript — Lire, écrire et manipuler

Référence : MDN JSON · json.org