Entrée JSON

Vue arborescente

Qu'est-ce que le visualiseur d'arbre JSON ?

Certains JSON sont vraiment volumineux. Une réponse de requête GraphQL, un export depuis une base NoSQL, un dump de configuration d'élément réseau — cela peut faire des milliers de lignes avec des objets imbriqués dans des tableaux eux-mêmes dans d'autres objets. Le lire en texte brut est épuisant. Le visualiseur d'arbre JSON transforme ce mur d'accolades en une hiérarchie navigable où chaque objet est une branche dépliable et chaque valeur une feuille que vous lisez d'un coup d'œil.

L'idée d'« arbre » vient directement du modèle de données JSON lui-même — la spécification officielle JSON définit JSON comme un arbre d'objets, de tableaux et de valeurs primitives, avec RFC 8259 pour la version IETF. Le visualiseur rend cette structure visible. Si vous avez déjà utilisé JSONPath pour interroger des données imbriquées (la norme est RFC 9535), les chemins affichés dans l'arbre correspondent un-pour-un aux expressions JSONPath que vous pouvez copier-coller dans votre code.

Comment utiliser le visualiseur d'arbre JSON

Collez votre JSON – Déposez votre JSON dans l'éditeur de gauche, ou cliquez sur « Upload » pour charger directement un fichier .json. « Sample » fournit un petit exemple prêt à l'emploi.
Regardez l'arbre se construire – Le panneau de droite affiche la structure en direct. Chaque clé d'objet apparaît avec un triangle d'ouverture ; chaque valeur feuille s'affiche avec sa couleur typée.
Déplier et replier les branches – Cliquez sur n'importe quelle branche pour l'ouvrir ou la fermer. Pratique pour masquer le bruit et vous concentrer sur la partie qui vous intéresse.
Lisez le chemin – Survolez une feuille pour voir son chemin JSON complet (par ex. $.profile.plan). Copiez-le directement dans votre code ou dans une requête JSONPath.
Repérez les tableaux d'un coup d'œil – Les tableaux affichent leur longueur à côté de la clé (par ex. sectors [3]) pour que vous sachiez combien d'éléments s'y trouvent avant de les déplier.

Astuce : Si une structure très imbriquée reste difficile à lire même sous forme d'arbre, passez à la vue JSON vers Tableau — pour des tableaux d'objets de forme similaire, un tableau se lit plus vite qu'un arbre.

Exemple

Un enregistrement d'abonné imbriqué. Le JSON brut à gauche devient un arbre navigable à droite — chaque objet est une branche, chaque valeur une feuille.

JSON → Arbre Explorer

subscriber.jsonJSON · imbriqué

{
  "msisdn": "447700900142",
  "profile": {
    "name": "Rosalind",
    "plan": "Unlimited 5G"
  },
  "network": {
    "cellId": "AB12-3CF",
    "rsrp": -92
  },
  "roaming": true
}

Vue arborescente4 branches · 6 feuilles

▼ root
├── msisdn: "447700900142"
├── ▼ profile
│   ├── name: "Rosalind"
│   └── plan: "Unlimited 5G"
├── ▼ network
│   ├── cellId: "AB12-3CF"
│   └── rsrp: -92
└── roaming: true

Cas d'usage courants

Explorer une réponse d'API inconnue

Vous interrogez une nouvelle API pour la première fois et la réponse est un bloc JSON de 400 lignes sur cinq niveaux d'imbrication. Au lieu de scroller dans les accolades, collez la réponse dans le visualiseur d'arbre. Les clés de premier niveau s'affichent d'abord ; vous ne dépliez que les branches qui vous intéressent. En environ 30 secondes, vous avez un modèle mental de la forme de la réponse — et vous connaissez le chemin exact vers chaque champ à extraire.

Déboguer des fichiers de configuration imbriqués

Configurations d'éléments réseau, manifestes Kubernetes, fichiers d'état Terraform — ce sont tous des JSON (ou YAML, le grand frère du JSON) très imbriqués. Quand quelque chose se comporte étrangement en staging mais fonctionne en production, ouvrir les deux comme arbres et comparer les structures côte à côte est bien plus rapide qu'un diff ligne à ligne. Pour la comparaison ligne à ligne proprement dite, combinez avec l'outil JSON Diff.

Enseignement et documentation

Quand vous expliquez une réponse d'API dans une doc ou une revue de code, un diagramme arborescent vaut mieux qu'un paragraphe. Ouvrez la réponse ici, dépliez les branches pertinentes, faites une capture d'écran ou copiez la mise en page dans votre rédaction. Le guide MDN sur JSON est un bon point de départ pour les lecteurs qui ont besoin d'une remise à niveau sur le modèle de données.

Fonctionnalités clés

Rendu paresseux – Seules les branches que vous dépliez sont rendues, ce qui garde la réactivité même pour des fichiers JSON de milliers de clés.
Affichage typé – Chaînes, nombres, booléens et nulls apparaissent chacun avec leur couleur et leur étiquette.
Annotations de longueur de tableau – Les tableaux affichent le nombre d'éléments à côté de la clé, vous savez ce que vous allez déplier.
Chemin au survol – Survolez un nœud pour révéler son chemin JSON complet ; copiez-le directement pour l'utiliser dans votre code ou dans des requêtes JSONPath.
Support du téléversement de fichier – Glissez un fichier .json au lieu de coller ; utile pour des fichiers trop volumineux pour le presse-papiers.
Confidentialité d'abord – L'analyse et le rendu se font tous deux dans votre navigateur ; rien n'est téléversé.

Foire aux questions

Jusqu'à quelle profondeur l'arbre peut-il aller ?

Il n'y a pas de limite de profondeur fixe — la spécification JSON n'en impose pas, et cet outil non plus. En pratique, les navigateurs gèrent très bien des structures profondes jusqu'à plusieurs centaines de niveaux. Si vous atteignez régulièrement cette profondeur, la conception des données mérite probablement d'être revue.

Gère-t-il les très gros fichiers JSON ?

Oui, jusqu'à un certain point. Les fichiers de moins de 10 Mo sont instantanés ; entre 50 et 100 Mo, vous remarquerez que l'analyse initiale prend un moment. Au-delà, c'est la mémoire du navigateur qui devient le vrai goulot d'étranglement — à cette taille, envisagez des outils en streaming comme jq en ligne de commande, bien décrit dans la documentation officielle de jq.

Mon JSON a des clés dupliquées — que se passe-t-il ?

À la lettre, RFC 8259 autorise les clés dupliquées mais le comportement est défini par l'implémentation. La plupart des analyseurs (y compris celui de tout navigateur moderne) gardent la dernière valeur et abandonnent les autres en silence, donc l'arbre n'affiche que la dernière. Si vous soupçonnez ce cas, validez d'abord avec un Validateur JSON — certains validateurs signalent les doublons en avertissement.

Le JSONPath affiché dans l'arbre est-il compatible avec des bibliothèques comme jq ?

Les chemins suivent la forme standard définie dans RFC 9535 (JSONPath), largement compatible avec la plupart des bibliothèques JSONPath. jq utilise une syntaxe légèrement différente — la traduction est mécanique (remplacer $. par . et [*] par []) et bien documentée sur le tag jq de Stack Overflow.

Mes données sont-elles en sécurité ?

Oui. Le JSON est analysé et rendu entièrement dans votre navigateur. Rien n'est téléversé, mis en cache ou journalisé. Si vous avez téléversé un fichier, il reste dans la mémoire du navigateur et est libéré à la fermeture de l'onglet.

Outils associés

Formateur JSON – Mettez en forme le JSON brut si vous voulez le lire comme texte en parallèle de l'arbre.
Validateur JSON – Confirmez que l'entrée est valide avant de l'explorer en arbre.
JSON vers Tableau – Préférable à un arbre quand vos données sont un tableau d'objets similaires.
JSON Diff – Comparez deux structures côte à côte plutôt que de parcourir mentalement deux arbres.

Ressources utiles

RFC 8259 – Spécification JSON de l'IETF ; définit le modèle de données que l'arbre visualise.
RFC 9535 — JSONPath – Syntaxe standard de requête pour naviguer dans les structures JSON.
JSON.org – Spécification originale de JSON avec les diagrammes de grammaire.
Guide JSON de MDN – Tutoriel JSON niveau débutant à intermédiaire.
Manuel jq – Outil en ligne de commande pour filtrer et transformer du JSON ; complète bien ce visualiseur pour les parties qui nécessitent du scripting.
Tag JSON de Stack Overflow – Réponses de la communauté pour des questions de parsing, de traversée et de tooling JSON.

Visualiseur d'arbre JSON