Comment afficher joliment du JSON en JavaScript : guide complet

Introduction : Pourquoi le JSON ressemble-t-il à du charabia, et comment y remédier ?

Avez-vous déjà ouvert la console du navigateur, vu une ligne interminable sans le moindre espace et pensé : « Où est l'erreur ? » ? C'est un classique. Le JSON est un langage universel d'échange de données, mais à l'état brut, il se lit à peu près comme un mode d'emploi de micro-ondes en japonais. Surtout quand il y a beaucoup de données : objets imbriqués, tableaux, longues chaînes.

Heureusement, JavaScript dispose d'outils intégrés qui transforment ce « charabia » en une beauté soignée et structurée. Ce processus s'appelle le pretty-print JSON (ou « affichage joli »). Dans cet article, nous allons passer en revue toutes les méthodes : du JSON.stringify de base aux solutions personnalisées avancées. Vous apprendrez non seulement à lire le JSON, mais aussi à le faire confortablement.

Cet article est rédigé pour pythonlib.ru — une ressource éducative où nous aimons les explications claires et les exemples concrets. C'est parti !

Qu'est-ce que le pretty-print JSON et pourquoi en a-t-on besoin ?

Le pretty-print (ou prettify) est le processus de formatage de données structurées (JSON, XML, YAML) avec des indentations, des sauts de ligne et un alignement. Visuellement, cela ressemble à du code bien présenté, et non à une longue chaîne unique.

Pourquoi en a-t-on besoin ?

\n
• Débogage (debugging). Vous voyez la structure de l'objet : où sont les clés, les objets imbriqués, les tableaux.
\n
• Lecture des logs. Dans la console du navigateur ou les logs serveur, le JSON formaté sauvegarde les yeux.
\n
• Documentation. Les exemples JSON dans la documentation sont toujours en pretty-print.
\n
• Apprentissage. Les débutants comprennent plus facilement la structure des données lorsqu'elle est décomposée en niveaux.
\n

En JavaScript, il existe deux principales façons d'obtenir un joli JSON : le JSON.stringify intégré et les bibliothèques tierces (par exemple, pretty-js). Mais commençons par les bases.

Méthode 1 : JSON.stringify() avec paramètres (la plus populaire)

Vous connaissez sûrement la méthode JSON.stringify(). Elle transforme un objet en chaîne JSON. Mais elle possède un deuxième et un troisième paramètres qui font des merveilles.

Syntaxe

JSON.stringify(value, replacer, space)

\n
• value — votre objet ou tableau.
\n
• replacer — une fonction ou un tableau pour filtrer les clés (souvent null).
\n
• space — le nombre d'espaces pour l'indentation (ou une chaîne, par exemple "\\t" pour une tabulation).
\n

Exemple 1 : Pretty-print de base avec espaces

const user = {\n  name: "Alexeï",\n  age: 30,\n  skills: ["JavaScript", "Python", "SQL"],\n  address: {\n    city: "Moscou",\n    zip: 101000\n  }\n};\n\n// Sans formatage — une seule ligne\nconsole.log(JSON.stringify(user));\n// {"name":"Alexeï","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"Moscou","zip":101000}}\n\n// Avec formatage — magnifique !\nconsole.log(JSON.stringify(user, null, 2));\n

Résultat dans la console :

{\n  "name": "Alexeï",\n  "age": 30,\n  "skills": [\n    "JavaScript",\n    "Python",\n    "SQL"\n  ],\n  "address": {\n    "city": "Moscou",\n    "zip": 101000\n  }\n}\n

Remarquez : des indentations de 2 espaces ont rendu la structure lisible. Vous pouvez utiliser 4 espaces ou une tabulation ("\\t").

Exemple 2 : Utilisation de replacer pour filtrer

Parfois, vous devez afficher seulement une partie des données. Le deuxième paramètre replacer peut être un tableau de clés.

const filtered = JSON.stringify(user, ["name", "skills"], 2);\nconsole.log(filtered);\n// {\n//   "name": "Alexeï",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ]\n// }\n

Ou une fonction :

const replacerFunc = (key, value) => {\n  if (key === "age") return undefined; // exclut