Passer au contenu
🛠️
Whiz Tools

Formateur JSON : Embellir et Valider JSON en Ligne Gratuitement

Formatez instantanément du JSON minimifié avec une indentation appropriée. Le formateur JSON en ligne gratuit valide la syntaxe, embellit le code et accélère le débogage. Fonctionne dans le navigateur avec un formatage en temps réel.

Formateur JSON

Formatez et embellissez votre JSON avec cet outil simple - le formatage se fait automatiquement au fur et à mesure de la saisie !

Le JSON formaté apparaîtra ici automatiquement...

Calculateur de chargement...
📚

Documentation

Qu'est-ce qu'un formateur JSON ?

Un formateur JSON est un outil qui prend un texte JSON (JavaScript Object Notation) et le réécrit avec une indentation et des retours à la ligne, sans modifier les données elles-mêmes. JSON est un format de texte brut qui sert à stocker et à transmettre des données structurées, construit à partir de paires nom/valeur et de listes. Les programmes économisent généralement de la place en supprimant tous les espaces superflus, ce qui produit une seule ligne dense, difficile à lire pour une personne. Un formateur, aussi appelé embellisseur ou « pretty printer », rétablit ces espaces de façon cohérente pour que la structure soit visible. Cet outil formate le JSON automatiquement pendant la saisie ou le collage, sans aucun bouton à actionner.

Règles de syntaxe JSON

JSON est défini par une spécification appelée RFC 8259. Il comporte deux types de conteneurs :

Les objets contiennent des paires nom/valeur entre accolades :

1{"name": "John", "age": 30, "city": "New York"}
2

Les tableaux contiennent des listes ordonnées entre crochets :

1["apple", "banana", "cherry"]
2

Une valeur JSON doit être de l'un des six types suivants : une chaîne, un nombre, un booléen (true ou false), null, un objet ou un tableau.

Quelques règles causent la plupart des erreurs :

  • Les noms de propriétés doivent être placés entre guillemets doubles. {name: "John"} est invalide ; il faut écrire {"name": "John"}.
  • Les chaînes doivent utiliser des guillemets doubles, et non des guillemets simples.
  • Une virgule ne peut pas suivre le dernier élément d'un objet ou d'un tableau (pas de virgule finale).
  • JSON n'a pas de syntaxe pour les commentaires, même si son aspect avec accolades et crochets vient de JavaScript.
  • JSON n'a pas de undefined. Utilisez null pour une valeur manquante.

Une erreur courante consiste à coller un littéral d'objet JavaScript au lieu de JSON. {name: 'John', age: undefined} est du JavaScript valide, mais pas du JSON valide. La version JSON est {"name": "John", "age": null}.

Fonctionnement de ce formateur JSON

De nombreux formateurs JSON font passer le texte par JSON.parse() pour construire un objet JavaScript, puis par JSON.stringify() pour le retransformer en texte avec des espaces. Cet aller-retour a un effet secondaire : les nombres JavaScript sont des flottants à double précision IEEE 754, qui ne peuvent pas représenter exactement tous les entiers au-delà de 2^53 − 1 (9,007,199,254,740,991). Un identifiant comme 9007199254740993 peut ressortir sous la forme 9007199254740992 après cet aller-retour.

Cet outil évite cette étape. Il lit l'entrée caractère par caractère avec un petit analyseur écrit à la main et, au lieu de convertir chaque nombre ou chaîne en valeur JavaScript, il copie ce morceau de texte exactement tel qu'il est écrit, puis le place au bon niveau d'indentation. Comme les nombres ne sont jamais convertis en flottant, les entiers de toute taille conservent leurs chiffres exacts. Si un objet contient deux fois la même clé, les deux copies sont conservées à leur place au lieu d'être réduites à la dernière, comme le ferait la construction d'un objet JavaScript.

Le processus, étape par étape :

  1. Lisez le jeton suivant (un objet, un tableau, une chaîne, un nombre, true, false ou null).
  2. Vérifiez-le par rapport à la grammaire JSON. Rejetez-le s'il enfreint une règle, comme une clé sans guillemets ou une virgule finale.
  3. Copiez le texte du jeton tel quel dans la sortie.
  4. Ajoutez un retour à la ligne et indentez de 2 espaces pour chaque niveau d'imbrication dans un objet ou un tableau.
  5. Répétez jusqu'à ce que toute l'entrée ait été lue.

L'indentation est fixée à 2 espaces ; aucun réglage ne permet de la modifier. Si l'entrée est vide, rien n'est affiché. Si l'entrée enfreint une règle JSON, l'outil affiche le message « Invalid JSON: Please check your input » plutôt qu'un message technique d'analyseur indiquant la position exacte du caractère. La fonction JSON.parse() intégrée aux navigateurs, elle, indique bien une position de caractère dans son message d'erreur.

Exemple détaillé

Cette entrée minifiée :

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

devient :

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

Chaque objet ou tableau imbriqué est indenté d'un niveau de plus que son parent, de sorte que la relation entre address et ses trois champs se voit au premier coup d'œil.

Un deuxième exemple montre pourquoi la copie des littéraux compte. Cette entrée :

1{"id":9007199254740993}
2

est formatée ainsi :

1{
2  "id": 9007199254740993
3}
4

Les chiffres restent exactement tels qu'ils ont été saisis. Un formateur fondé sur JSON.parse() suivi de JSON.stringify() transformerait silencieusement ce nombre en 9007199254740992.

Erreurs JSON courantes

  • Nom de propriété sans guillemets : {name: "John"}. Correction : {"name": "John"}.
  • Virgule finale : {"age": 30,}. Correction : supprimez la virgule avant l'accolade fermante.
  • Crochets ou accolades non appariés : {"data": [1, 2}. Correction : fermez le tableau avec ] avant de fermer l'objet.
  • Chaîne non fermée : {"name": "John}. Correction : ajoutez le guillemet fermant manquant.
  • Guillemets simples : {'name': 'John'}. Correction : utilisez des guillemets doubles.
  • undefined, NaN ou Infinity : aucune de ces valeurs n'est valide en JSON. Utilisez null ou une chaîne.

Ces erreurs viennent souvent de la copie d'un objet directement depuis la console d'un navigateur ou un journal de serveur, qui contient fréquemment une syntaxe propre à JavaScript à nettoyer avant que le résultat soit du JSON valide.

Quand utiliser un formateur JSON

Les formateurs JSON servent surtout à inspecter des réponses d'API, généralement envoyées minifiées pour économiser de la bande passante. Ils servent aussi à vérifier à la main des fichiers de configuration tels que package.json ou tsconfig.json, à lire des données copiées depuis le stockage local ou la console d'un navigateur, et à comprendre la forme d'un jeu de données reçu d'un autre système.

Autres façons de formater du JSON

  • Outils de développement du navigateur : Chrome, Edge et Firefox formatent automatiquement les réponses JSON dans le volet d'aperçu de l'onglet Réseau.
  • Éditeurs de code : Visual Studio Code formate un fichier JSON ouvert avec Maj+Alt+F sous Windows, Maj+Option+F sur Mac ou Ctrl+Maj+I sous Linux. La plupart des éditeurs proposent un raccourci équivalent ou une extension de mise en forme.
  • Ligne de commande : jq (jq . file.json) et l'outil intégré de Python, python -m json.tool file.json, formatent tous deux du JSON depuis un terminal.

Intégrer le formatage JSON dans du code

La plupart des langages de programmation incluent une bibliothèque JSON avec une option d'indentation. En JavaScript :

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

En Python :

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

Les deux approches analysent le texte pour en faire une structure de données native, puis le sérialisent à nouveau avec des espaces. Comme montré plus haut, c'est simple à écrire mais cela peut modifier de grands entiers, car les deux langages stockent par défaut les nombres sous forme de doubles. Les applications qui ont besoin d'entiers exacts de grande taille, comme les identifiants de base de données, les stockent généralement sous forme de chaînes en JSON plutôt que de nombres.

Une brève histoire de JSON

Douglas Crockford a défini JSON au début des années 2000, en tirant sa syntaxe des littéraux d'objet JavaScript tout en le rendant utilisable depuis n'importe quel langage. La RFC 4627 l'a formalisé en 2006. Il s'est répandu rapidement parce qu'il était plus court à écrire que XML et correspondait directement aux objets JavaScript, ce qui comptait à mesure que les applications web se mettaient à récupérer des données en arrière-plan plutôt que de recharger des pages entières. Dans les années 2010, il était largement utilisé par les API web.

Foire aux questions

Qu'est-ce qu'un formateur JSON ? Un outil qui ajoute une indentation, des retours à la ligne et des espaces à un texte JSON pour que sa structure soit facile à lire, sans modifier les données.

Le formatage modifie-t-il les données ? Non. Le formatage ne modifie que les espaces. Cet outil copie chaque chaîne et chaque nombre exactement tels qu'ils ont été saisis ; les valeurs de la sortie formatée correspondent donc exactement à l'entrée, y compris les nombres trop grands pour être stockés exactement comme nombre JavaScript.

Pourquoi ai-je une erreur « Invalid JSON » ? L'entrée enfreint une règle JSON. Les causes courantes sont des noms de propriétés sans guillemets, une virgule finale, des guillemets simples, une chaîne non fermée ou un crochet non apparié. Cet outil n'affiche pas la position exacte du problème ; vérifier l'entrée d'après les règles énumérées plus haut permet généralement de le trouver rapidement.

Le JSON peut-il contenir des commentaires ? Non. La spécification ne les autorise pas. Des formats tels que JSONC et JSON5 ajoutent la prise en charge des commentaires à la syntaxe JSON pour les cas où c'est utile, par exemple les fichiers de configuration.

Quelle est l'indentation standard du JSON ? Deux espaces constituent une convention courante, et c'est ce que cet outil utilise. Certains guides de style préfèrent quatre espaces ou des tabulations ; la spécification JSON elle-même n'impose aucune indentation particulière.

Quelle est la différence entre JSON.parse() et JSON.stringify() ? JSON.parse() transforme une chaîne JSON en valeur JavaScript. JSON.stringify() fait l'inverse : elle transforme une valeur JavaScript en chaîne JSON et accepte un argument d'indentation pour l'affichage lisible. Cet outil n'utilise aucune de ces deux fonctions en interne, ce qui lui permet de conserver exactement les grands entiers.

Références

  1. Internet Engineering Task Force. RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format. RFC 8259 — une valeur JSON est un objet, un tableau, un nombre, une chaîne, true, false ou null ; seuls des espaces sont autorisés entre les jetons.
  2. Mozilla Developer Network. JSON.parse(). Référence de JSON.parse() — les tableaux et les objets ne peuvent pas comporter de virgules finales ; le message d'erreur indique une position.
  3. Mozilla Developer Network. Number.MAX_SAFE_INTEGER. Référence de Number.MAX_SAFE_INTEGER — le plus grand entier sûr est 2^53 − 1 = 9,007,199,254,740,991.
  4. Internet Engineering Task Force. RFC 4627: The application/json Media Type for JavaScript Object Notation (JSON). RFC 4627 — première RFC sur JSON, par D. Crockford, juillet 2006.
  5. Microsoft. Editing JSON with Visual Studio Code. Documentation JSON de VS Code — le raccourci Formater le document sur chaque plateforme.
  6. Python Software Foundation. json — JSON encoder and decoder. Documentation json de Python — python -m json.tool met en forme du JSON depuis la ligne de commande.