Vue arbre JSON

Traitement local

app.tree.view

Vous pouvez aussi injecter des données via #data={"name":"Ada"} ou #url=... Elles sont lues puis retirées de la barre d’adresse.

Affichez le JSON en arbre repliable. Quand la hiérarchie est profonde et les champs nombreux, c’est plus clair que de chercher des accolades dans du texte, et le type de chaque nœud est visible. Un clic copie le JSONPath, pour un test ou la page JSONPath.

Déplier / replier

Repliez d’abord les branches hors sujet et ne gardez que le chemin utile. Quelques niveaux peu profonds sont ouverts par défaut ; cliquez pour aller plus loin.

Les objets affichent le nombre de champs, les tableaux le nombre d’éléments, pour estimer le volume.

Les types sautent aux yeux

Objets, tableaux, chaînes, nombres, booléens et null sont distingués. Évitez de confondre "123" et 123 .

Utile en intégration pour confirmer le type réellement renvoyé par le backend.

Complémentaire de la détection de champs

L’arbre montre la structure ; horodatages et couleurs se voient sur la page de détection. Enchaînez : localisez le chemin dans l’arbre, puis vérifiez si la feuille a un format spécial.

Lecture seule : on ne modifie pas les données métier dans l’arbre.

Exemple

Données adaptées à la vue arbre

{
  "project": "json-toolbox",
  "config": {
    "theme": "light",
    "limits": { "maxSizeMB": 10 }
  }
}

Vous verrez

 La racine est un objet → config est un objet → limits est un objet → maxSizeMB est un nombre. Cliquez les nœuds, sans compter les accolades.

Peut-on modifier une valeur dans l’arbre ?

Cette page sert surtout à consulter. Après modification, validez en recollant sur la page de formatage.

Que faire si c’est très volumineux ?

Extrayez d’abord un sous-arbre avec JSONPath, puis dépliez.

Que fait un clic sur un nœud ?

L’outil tente de copier le JSONPath du nœud (par ex. $.user.id ) dans le presse-papiers, pour écrire une assertion.

Par où commencer : arbre ou formatage ?

Garantissez d’abord un JSON valide. Un texte invalide ne peut pas dessiner d’arbre : validez ou formatez d’abord.

Flux recommandé

Collez un JSON valide, ou chargez l’exemple pour voir comment l’arbre se déplie.
Repliez les branches hors sujet et cliquez jusqu’au champ cible.
Copiez le chemin, vérifiez-le sur la page JSONPath, ou placez-le dans un test.
Si une feuille ressemble à un horodatage ou une URL, confirmez avec la détection de champs.

L’arbre sert à « voir la structure » ; JSONPath à « extraire en lot ». Sur un gros document, les deux ensemble vont plus vite que tout déplier.