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 du 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 en texte brut qui sert à stocker et à transmettre des données structurées, organisées en paires nom/valeur et en listes. Les programmes économisent généralement de l’espace en supprimant tous les espaces superflus, ce qui produit une seule ligne dense et difficile à lire pour une personne. Un formateur, également appelé outil d’embellissement ou de mise en forme, rétablit ces espaces de manière cohérente afin de rendre la structure visible. Cet outil met automatiquement le JSON en forme au fur et à mesure de la saisie ou du collage. Il n’y a pas de bouton de mise en forme : la sortie est actualisée à chaque frappe. Un bouton de réinitialisation efface l’entrée et un bouton de copie copie le résultat mis en forme.

Règles de syntaxe JSON

JSON est défini par une spécification appelée RFC 8259. Il possède 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 de caractères, un nombre, une valeur booléenne (true ou false), null, un objet ou un tableau.

Quelques règles sont à l’origine de la plupart des erreurs :

  • Les noms de propriétés doivent être entourés de guillemets doubles. {name: "John"} n’est pas valide ; 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 ne possède pas de syntaxe pour les commentaires, même si son apparence avec des accolades et des crochets vient de JavaScript.
  • JSON ne possède pas de valeur undefined. Il faut utiliser null pour une valeur manquante.

Une erreur fréquente consiste à coller un littéral objet JavaScript au lieu de JSON. {name: 'John', age: undefined} est valide en JavaScript, mais pas en JSON. 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 reconvertir en texte avec des espaces. Ce parcours aller-retour a un effet secondaire : les nombres JavaScript sont des nombres flottants IEEE 754 en double précision, 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 ainsi devenir 9007199254740992 après ce parcours.

Cet outil évite cette étape. Il lit l’entrée caractère par caractère avec un petit analyseur écrit manuellement et, au lieu de convertir chaque nombre ou chaîne en valeur JavaScript, il copie ce fragment de texte exactement tel qu’il a été écrit, puis le place au niveau d’indentation approprié. Comme les nombres ne sont jamais convertis en nombres flottants, les entiers de toute taille conservent exactement leurs chiffres. Si un objet contient deux fois la même clé, les deux occurrences sont conservées à leur emplacement au lieu d’être réduites à la dernière, ce qui se produirait lors de la construction d’un objet JavaScript.

Le processus, étape par étape :

  1. Lire le prochain jeton (un objet, un tableau, une chaîne, un nombre, true, false ou null).
  2. Le vérifier par rapport à la grammaire JSON. Le rejeter s’il enfreint une règle, par exemple avec une clé sans guillemets ou une virgule finale.
  3. Copier le texte du jeton tel quel dans la sortie.
  4. Ajouter un retour à la ligne et indenter de 2 espaces pour chaque niveau d’imbrication dans un objet ou un tableau. Un objet ou un tableau vide reste sur une seule ligne, sous la forme {} ou [].
  5. Répéter 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. Lorsque la zone de saisie est vide, le panneau de sortie affiche le texte indicatif « Le JSON mis en forme apparaîtra automatiquement ici… ». Si l’entrée enfreint une règle JSON, l’outil affiche le message « JSON invalide : veuillez vérifier votre saisie » au lieu d’un message technique de l’analyseur indiquant la position exacte du caractère. En revanche, la fonction intégrée JSON.parse() des navigateurs indique bien une position de caractère dans son message d’erreur.

Exemple de mise en forme

Cette entrée compacte :

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 supplémentaire par rapport à son parent. La relation entre address et ses trois champs est ainsi visible immédiatement.

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

1{"id":9007199254740993}
2

est mise en forme ainsi :

1{
2  "id": 9007199254740993
3}
4

Les chiffres restent exactement ceux qui ont été saisis. Un formateur fondé sur JSON.parse() puis 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 : supprimer la virgule avant l’accolade fermante.
  • Crochets incompatibles : {"data": [1, 2}. Correction : fermer le tableau avec ] avant de fermer l’objet.
  • Chaîne non fermée : {"name": "John}. Correction : ajouter le guillemet fermant manquant.
  • Guillemets simples : {'name': 'John'}. Correction : utiliser des guillemets doubles.
  • undefined, NaN ou Infinity : aucune de ces valeurs n’est valide en JSON. Utiliser null ou une chaîne de caractères.

Ces erreurs sont souvent dues à la copie directe d’un objet depuis la console d’un navigateur ou depuis un journal de serveur, qui contient fréquemment une syntaxe propre à JavaScript et doit être nettoyé avant de devenir du JSON valide.

Quand utiliser un formateur JSON

Les formateurs JSON servent le plus souvent à examiner des réponses d’API, généralement envoyées sous forme compacte pour économiser de la bande passante. Ils servent aussi à vérifier manuellement des fichiers de configuration tels que package.json ou composer.json, à lire des données copiées depuis le stockage local ou la console d’un navigateur, et à comprendre la structure d’un jeu de données reçu d’un autre système.

Autres méthodes pour mettre du JSON en forme

  • Outils de développement du navigateur : Chrome, Edge et Firefox mettent automatiquement en forme les réponses JSON dans le panneau d’aperçu de l’onglet Network.
  • Éditeurs de code : Visual Studio Code met en forme un fichier JSON ouvert avec Alt+Shift+F (Shift+Option+F sur Mac). La plupart des éditeurs proposent un raccourci équivalent ou une extension de mise en forme.
  • Ligne de commande : jq (jq . file.json) et le module intégré de Python python -m json.tool file.json mettent tous deux le JSON en forme depuis un terminal.

Intégrer la mise en forme 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

Ces deux approches analysent le texte pour le convertir en structure de données native, puis le sérialisent de nouveau avec des espaces. Elles sont simples à écrire, mais peuvent modifier les nombres. JavaScript stocke chaque nombre sous forme de nombre flottant double précision : 9007199254740993 redevient donc 9007199254740992. Python conserve exactement les nombres entiers, car les entiers Python n’ont pas de limite de taille, mais il réécrit tout de même 1.0e2 en 100.0 et transforme 1e999 en Infinity, qui n’est pas une valeur JSON valide. Les applications qui doivent conserver des entiers volumineux exactement, comme les identifiants de bases de données, les stockent souvent sous forme de chaînes dans le JSON plutôt que sous forme de nombres.

Brève histoire de JSON

Douglas Crockford a défini JSON au début des années 2000, en s’inspirant de la syntaxe des littéraux objet JavaScript tout en la rendant utilisable depuis n’importe quel langage. La RFC 4627 l’a officialisé en 2006. Son adoption a été rapide, car il était plus court à écrire que XML et se transposait directement en objets JavaScript, ce qui était utile lorsque les applications web ont commencé à récupérer des données en arrière-plan au lieu de recharger des pages entières. Dans les années 2010, il était devenu le format par défaut des API REST et de bases de données telles que MongoDB.

Foire aux questions

Qu’est-ce qu’un formateur JSON ?
Un outil qui ajoute une indentation, des retours à la ligne et des espaces au texte JSON afin d’en rendre la structure facile à lire, sans modifier les données.

La mise en forme modifie-t-elle les données ?
Non. La mise en forme 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 mise en forme correspondent donc précisément à celles de l’entrée, y compris les nombres trop grands pour être stockés exactement comme nombres JavaScript.

Pourquoi l’erreur « JSON invalide » s’affiche-t-elle ?
L’entrée enfreint une règle JSON. Les causes courantes sont les noms de propriétés sans guillemets, une virgule finale, des guillemets simples, une chaîne non fermée ou des crochets incompatibles. Cet outil n’indique pas la position exacte du caractère problématique ; la vérification de l’entrée par rapport aux règles ci-dessus permet généralement de le trouver rapidement.

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 lorsque cela est utile, par exemple dans les fichiers de configuration.

Quelle est l’indentation JSON standard ?
Deux espaces constituent la convention la plus courante dans le développement web, et c’est l’indentation utilisée par cet outil. Certains guides de style utilisent plutôt 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() effectue l’opération inverse en transformant une valeur JavaScript en chaîne JSON et accepte un argument d’indentation pour la mise en forme. Cet outil n’utilise aucune de ces deux fonctions en interne, ce qui lui permet de conserver exactement les entiers volumineux.

Références

  1. RFC 8259 — Format d’échange de données JavaScript Object Notation (JSON)
  2. MDN Web Docs : JSON
  3. json.org