Arbre JSON
Explorez le JSON comme un arbre repliable avec badges de type, chemins JSON Pointer et recherche
JSON
Arbre
Collez du JSON à gauche et cliquez sur Construire l'arbre.
Arbre JSON
Explorez le JSON comme un arbre repliable avec badges de type, chemins JSON Pointer et recherche
Fonctionnalités
- Arbre repliable récursif : chaque nœud objet et tableau a son propre bouton déplier/replier, racine dépliée par défaut pour rendre la structure immédiatement visible
- JSON Pointer (RFC 6901) par nœud — survolez n'importe quelle clé pour voir le chemin complet, cliquez l'icône chaîne pour le copier pour patches, diffs ou instancePath de schéma
- Badges typés colorent chaque nœud selon son vrai type (string / number / boolean / null / array / object) — null n'est plus caché derrière 'object' comme dans typeof JavaScript
- Colonne preview affiche un résumé sur une ligne : scalaires en ligne, tableaux comme `[ N ]` avec leur cardinal, objets comme `{ N }` avec leur nombre de clés — taille scannable avant dépliage
- Filtre de recherche matche sur clés, chemins JSON Pointer et texte de preview ; l'arbre se replie à ne montrer que les branches contenant un hit, rendant les lookups dans des documents 10MB praticables
- Bouton copier valeur écrit la valeur du nœud dans le presse-papiers — chaînes en texte brut, types complexes en JSON pretty-print prêt à coller dans un autre outil
- Les erreurs de parsing incluent le message complet du moteur JavaScript (souvent avec ligne/colonne) pour corriger l'entrée plutôt que deviner
- Purement côté client : l'entrée ne quitte pas le navigateur, l'arbre entier est construit en mémoire, pas de télémétrie, et la page fonctionne hors-ligne après mise en cache
Mode d'emploi
- Collez le JSON dans la zone gauche, ou cliquez Charger un exemple pour un petit exemple.
- Cliquez Construire l'arbre. La racine est affichée dépliée ; cliquez le chevron à côté de tout nœud objet/tableau pour descendre.
- Utilisez la zone de recherche pour filtrer par nom de clé, valeur ou chemin JSON Pointer — seules les branches matchantes restent visibles.
- Survolez une clé pour voir son chemin JSON Pointer en infobulle ; cliquez l'icône chaîne pour le copier.
- Cliquez l'icône copier pour obtenir la valeur du nœud — scalaires bruts, objets/tableaux en JSON pretty-print.
- Utilisez Tout déplier / Tout replier pour basculer l'arbre entier d'un coup.
Conseils et bonnes pratiques
- Maintenez Shift en cliquant un toggle pour replier/déplier des branches entières plus vite — quand le raccourci OS est mappé, le bouton toggle continue de fonctionner individuellement.
- Cherchez une valeur (pas seulement une clé) en débugage — le texte de preview est inclus dans le match.
- Copiez un JSON Pointer ici et collez-le dans le rapport d'erreur de JSON Schema Validator pour confirmer le nœud exact qui a cassé la validation.
- Si l'arbre semble lent, repliez d'abord le plus gros tableau — les longs tableaux dominent le coût de rendu.
- Couplez avec JSON Diff : copiez une valeur avant/après un changement pour voir l'édition précise au niveau du nœud.
FAQ
Qu'est-ce qu'un JSON Pointer et comment l'utilise-t-on ?
Un JSON Pointer (RFC 6901) est un chemin séparé par slashs qui nomme exactement un nœud dans un document JSON : `/owner/name` est le champ name de l'objet owner ; `/tags/1` est le deuxième élément du tableau tags. La racine est la chaîne vide (montrée ici comme `/`). Cet outil utilise le même format que les erreurs instancePath de JSON Schema et des outils comme fast-json-patch, donc vous pouvez copier un pointer depuis ici et l'utiliser comme référence directe ailleurs.
En quoi le badge de type diffère de typeof JavaScript ?
De deux manières. D'abord, null s'affiche comme 'null' (typeof null === 'object' en JavaScript — une verrue de longue date). Ensuite, les tableaux s'affichent comme 'array' plutôt que 'object' de typeof, parce qu'ils sont rendus et se comportent différemment. Cela correspond aux six types de valeur de la spec JSON : string, number, boolean, null, array, object.
Comment fonctionne la recherche ?
La requête est matchée insensible à la casse contre la clé, le chemin JSON Pointer et la chaîne preview du nœud. Une branche reste visible si elle ou un descendant match — vous pouvez donc chercher une valeur profondément imbriquée et toujours voir les clés sur le chemin pour y arriver. Videz la zone pour restaurer l'arbre complet.
Gère-t-il du JSON très gros ?
Il construit l'arbre entier en mémoire une fois, donc des documents à l'échelle du mégaoctet rendent confortablement. Plusieurs centaines de mégaoctets peuvent être tendus sur téléphones à faible RAM ; pour cette échelle, préférez des outils streaming ou lancez JSON Minify d'abord pour enlever les espaces. Le rendu n'est pas virtualisé — chaque nœud visible rend en élément DOM — donc replier les grosses branches est l'astuce si ça semble lent.
Replier un nœud perd-il ses données ?
Non. Le repli est purement visuel — l'objet parsé sous-jacent reste en mémoire, donc redéplier montre le même contenu instantanément. La recherche ignore l'état de repli et révèle les hits dans les nœuds repliés.
Pourquoi la preview affiche-t-elle `{ 0 }` pour un objet vide ?
Le nombre entre accolades est le nombre de clés pour les objets et la longueur pour les tableaux. Les objets à zéro clé et les tableaux à zéro longueur sont du JSON valide et ne sont pas la même valeur (`{}` vs `[]`), donc montrer le nombre et les accolades rend à la fois le type et la taille évidents en un coup d'œil.
Quelle différence avec la vue arbre de JSON Formatter ?
L'arbre de JSON Formatter est un onglet parmi beaucoup (aux côtés de pretty-print, JSONPath, validation de schéma, transformations, diff). Cet outil est la vue arbre seule autonome : une URL, un job, interaction plus profonde par nœud (badges de type, copie de pointer par nœud, copie de valeur par nœud) sans la surface formatage/transformation/validation.
Quelque chose est-il envoyé à un serveur ?
Non. Le JSON reste dans votre navigateur, le parsing et la construction d'arbre tournent en synchrone dans le même contexte JavaScript qui a rendu la page, et l'onglet Réseau ne montre aucune requête au clic Construire l'arbre. Après le premier chargement la page fonctionne hors-ligne.