Comment formater JSON en ligne — Le guide complet

Qu'est-ce que JSON ?

JSON (JavaScript Object Notation) est un format d'échange de données léger que les humains peuvent facilement lire et écrire, et que les machines peuvent facilement analyser et générer. C'est le format dominant pour les réponses API, les fichiers de configuration et le stockage de données dans le développement web moderne.

Si vous travaillez avec des API, vous rencontrez JSON constamment. Presque chaque réponse d'API REST, chaque charge utile de webhook et chaque fichier de configuration dans un projet Node.js est du JSON. Savoir lire, formater et déboguer du JSON est une compétence fondamentale pour tout développeur.

Pourquoi formater JSON ?

Le JSON minifié est difficile à lire. Les réponses API arrivent souvent sur une seule ligne sans espace — un cauchemar à déboguer. Formater (ou "pretty-printer") du JSON ajoute une indentation et des sauts de ligne appropriés pour que vous puissiez immédiatement comprendre sa structure.

Avant le formatage :

{"name":"John Doe","age":30,"city":"New York","hobbies":["reading","coding"],"address":{"street":"123 Main St","zip":"10001"}}

Après le formatage :

{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "hobbies": [
    "reading",
    "coding"
  ],
  "address": {
    "street": "123 Main St",
    "zip": "10001"
  }
}

La différence est frappante. Dans la version formatée, vous voyez d'un coup d'œil qu'il y a cinq clés au niveau supérieur, que hobbies est un tableau avec deux éléments, et que address est un objet imbriqué. Dans la version minifiée, vous devez analyser visuellement les accolades et crochets correspondants.

Comment utiliser un formateur JSON

1. Collez votre JSON — déposez vos données JSON dans le champ de saisie
2. Cliquez sur "Formater" — obtenez-le nettoyé avec une indentation de 2 ou 4 espaces
3. Cliquez sur "Minifier" — compressez le JSON en une seule ligne
4. Copiez le résultat — un clic et c'est dans votre presse-papiers

Le formateur valide votre JSON lors du collage, vous donnant un retour immédiat si quelque chose ne va pas.

Erreurs JSON courantes (et comment les corriger)

JSON a des règles de syntaxe strictes, et en violer une seule provoque une erreur d'analyse. Voici les plus fréquentes, classées par fréquence d'apparition en pratique :

1. Virgules finales

L'erreur JSON la plus courante. JavaScript autorise les virgules finales dans les tableaux et objets, donc les développeurs oublient souvent que JSON ne le fait pas.

// Incorrect — virgule finale après "coding"
{
  "hobbies": ["reading", "coding",]
}

// Correct
{
  "hobbies": ["reading", "coding"]
}

2. Guillemets simples au lieu de guillemets doubles

JSON nécessite des guillemets doubles pour toutes les chaînes. Les guillemets simples sont valides en JavaScript et Python mais vont casser l'analyse JSON.

// Incorrect
{'name': 'John Doe'}

// Correct
{"name": "John Doe"}

3. Clés sans guillemets

Les objets JavaScript n'ont pas besoin de clés entre guillemets (pour les identificateurs simples), mais en JSON chaque clé doit être une chaîne entre guillemets doubles.

// Incorrect
{name: "John Doe", age: 30}

// Correct
{"name": "John Doe", "age": 30}

4. Commentaires dans JSON

JSON ne supporte pas les commentaires. Cela surprend les gens parce que JSON ressemble à JavaScript, et JavaScript supporte les commentaires. Si vous avez besoin de commentaires dans un fichier de configuration, utilisez JSONC (JSON with Comments, supporté dans VS Code) ou YAML.

// Incorrect
{
  "port": 3000,  // port du serveur
  "host": "localhost"
}

// Correct
{
  "port": 3000,
  "host": "localhost"
}

5. Caractères spéciaux non échappés

Les chaînes contenant des barres obliques inverses, des guillemets doubles ou des caractères de contrôle doivent être correctement échappées :

// Incorrect — barre oblique inverse et guillemet non échappés
{"path": "C:\Users\john", "note": "He said \"hello\""}

// Correct
{"path": "C:\\Users\\john", "note": "He said \"hello\""}

6. Types de valeurs invalides

JSON supporte exactement ces types de valeurs : chaînes, nombres, booléens (true/false), null, objets et tableaux. Rien d'autre n'est valide :

// Incorrect
{"value": undefined}
{"count": NaN}
{"total": Infinity}
{"date": new Date()}

// Alternatives correctes
{"value": null}
{"count": 0}
{"total": 9999999}
{"date": "2026-03-15T10:30:00Z"}

Formater JSON depuis la ligne de commande

Quand vous n'avez pas accès à un outil web, ou quand vous devez formater du JSON dans le cadre d'un script, ces approches en ligne de commande sont pratiques :

Avec Python (disponible sur la plupart des systèmes)

# Formater un fichier JSON
python3 -m json.tool input.json

# Formater du JSON en pipe
curl -s https://api.example.com/data | python3 -m json.tool

# Formater avec une indentation personnalisée
python3 -c "import json,sys; print(json.dumps(json.load(sys.stdin), indent=4))" < input.json

Avec jq (le couteau suisse de JSON)

jq est un processeur JSON dédié et l'outil le plus puissant pour travailler avec JSON en ligne de commande :

# Pretty-print
cat data.json | jq '.'

# Formater et extraire un champ spécifique
cat data.json | jq '.users[0].name'

# Formater une réponse API
curl -s https://api.example.com/users | jq '.'

Si vous travaillez régulièrement avec du JSON et que vous n'avez pas encore jq installé, installez-le maintenant. Il vous sauvera d'innombrables heures.

Avec Node.js

# Formatage rapide
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync('/dev/stdin','utf8')),null,2))" < input.json

Conseils pour travailler avec JSON

Choisissez votre indentation judicieusement

• Indentation de 2 espaces : Plus compact, affiche plus de contenu à l'écran. Populaire dans les projets JavaScript/TypeScript et la plupart des frameworks web. Utilisé dans la plupart des documentations API.
• Indentation de 4 espaces : Plus facile à lire avec des structures profondément imbriquées. Courant dans les projets Python et les environnements Java d'entreprise.
• Indentation par tabulation : Techniquement valide mais rare en JSON. Restez avec des espaces.

Pour la plupart du développement web, 2 espaces est le choix pratique. Il fournit une hiérarchie visuelle suffisante sans gaspiller d'espace horizontal.

Toujours valider avant de déployer

Validez toujours le JSON avant de l'utiliser en production, surtout lorsque vous l'avez écrit ou modifié manuellement. Une seule virgule manquante ou une parenthèse non correspondante peut faire planter toute une application. Notre formateur détecte les erreurs de syntaxe dès que vous collez, vous permettant de repérer rapidement les problèmes.

Utiliser JSON Schema pour la validation structurelle

Si vous créez une API qui accepte des entrées JSON, une simple analyse ne suffit pas. JSON Schema vous permet de définir la structure, les types et les contraintes attendus :

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "name": { "type": "string", "minLength": 1 },
    "age": { "type": "integer", "minimum": 0 },
    "email": { "type": "string", "format": "email" }
  },
  "required": ["name", "email"]
}

Cela détecte les champs requis manquants, les mauvais types et les valeurs hors plage — des choses que l'analyse JSON de base ne détectera jamais.

Trier les clés pour des diffs cohérents

Lors de la comparaison de deux objets JSON (dans une revue de code ou un diff de configuration), les clés non triées créent des diffs bruyants. De nombreux formateurs, y compris le nôtre, offrent une option pour trier les clés d'objet alphabétiquement et récursivement. C'est particulièrement utile pour :

• Fichiers de configuration en contrôle de version (réduit les diffs insignifiants)
• Comparer les réponses API lors du débogage
• Instantanés de test qui doivent être déterministes

Scénarios de débogage JSON réels

Déboguer une réponse API

Vous avez envoyé une requête curl et reçu une seule ligne JSON minifiée. Pour comprendre ce qui s'est mal passé, vous devez d'abord voir la structure :

curl -s https://api.example.com/users/123 | jq '.'

Ou collez la réponse dans le formateur JSON. Vous pouvez alors voir si la structure de la réponse est incorrecte, si un champ est manquant ou si une valeur est inattendue.

Comparer deux objets JSON

Vous avez deux réponses API qui devraient être identiques mais quelque chose diffère. Formatez les deux avec des clés triées, puis lancez un diff :

jq -S '.' response1.json > sorted1.json
jq -S '.' response2.json > sorted2.json
diff sorted1.json sorted2.json

Le drapeau -S trie les clés alphabétiquement pour que les différences structurelles ne créent pas de bruit dans la sortie du diff.

Corriger les erreurs de copier-coller

Un collègue a collé du JSON dans Slack et les guillemets typographiques ont corrompu le contenu. Collez-le dans le formateur et il mettra en évidence l'erreur (guillemets courbes au lieu de droits) pour que vous sachiez exactement quoi corriger.

Cela arrive plus souvent qu'on ne le pense. Les applications de chat, les traitements de texte et certains éditeurs de texte convertissent automatiquement " en guillemets courbes, qui ne sont pas valides en JSON.

Extraire des données d'un grand fichier JSON

Vous avez reçu un fichier JSON de plusieurs mégaoctets mais n'avez besoin que d'une petite partie. Au lieu de faire défiler des milliers de lignes, utilisez jq pour extraire exactement ce dont vous avez besoin :

# Obtenir l'email du premier utilisateur
cat users.json | jq '.data.users[0].email'

# Obtenir tous les noms d'utilisateurs en liste plate
cat users.json | jq '[.data.users[].name]'

# Filtrer les utilisateurs par statut
cat users.json | jq '[.data.users[] | select(.status == "active")]'

JSON vs autres formats de données

Propriété	JSON	YAML	XML	TOML
Lisibilité	Bonne	Excellente	Correcte	Bonne
Commentaires	Non	Oui	Oui	Oui
Types de données	Basiques	Riches	Basés sur chaînes	Riches
Taille de fichier	Petite	Petite	Grande	Petite
Vitesse d'analyse	Rapide	Modérée	Lente	Rapide
Écosystème	Immense	Large	Large	En croissance

JSON l'emporte pour la communication API et l'échange de données grâce à sa simplicité et son support universel de parseurs. YAML est mieux adapté aux fichiers de configuration où les commentaires et la lisibilité comptent. XML tient toujours sa place dans les systèmes d'entreprise et les formats de documents. TOML gagne du terrain pour la configuration (Cargo de Rust, pyproject.toml de Python).

Considérations de sécurité

Ne collez pas de données sensibles dans des formateurs côté serveur

Certains formateurs JSON en ligne envoient vos données à un serveur pour traitement. Si vous travaillez avec des clés API, des tokens, des mots de passe ou des données personnelles, utilisez uniquement un formateur côté client qui traite tout dans le navigateur. Notre outil effectue tout le formatage localement — rien n'est jamais transmis.

Méfiez-vous de l'injection JSON

Lors de la création d'applications qui acceptent des entrées JSON, validez et assainissez toujours les données. Ne construisez jamais du JSON en concaténant des chaînes :

// Dangereux — risque d'injection JSON
const json = '{"name": "' + userInput + '"}';

// Sûr
const json = JSON.stringify({ name: userInput });

Soyez prudent avec JSON.parse sur des données non fiables

JSON.parse() est généralement sûr (contrairement à eval()), mais les données analysées peuvent avoir des types ou une structure inattendus. Validez toujours la forme du JSON analysé avant de l'utiliser dans votre application.

Formatez vos données JSON dès maintenant avec le formateur JSON gratuit. Il s'exécute entièrement dans le navigateur, supporte la coloration syntaxique et détecte les erreurs dès que vous collez.