Visionneuse JSON

Une vue en arbre sert à explorer un payload que vous n’avez pas écrit. Repliez ce qui ne vous intéresse pas, dépliez ce qui vous intéresse, et copiez le chemin de n’importe quelle valeur pour l’atteindre depuis votre code.

Elle est conçue pour les gros documents. Les nœuds ne sont rendus que lorsque leur parent est déplié : un fichier de 10 Mo replié coûte la taille de sa racine, pas son nombre de nœuds.

Ce que l’arbre vous montre

Au-delà de la structure, quelques choses difficiles à voir dans le texte brut.

Le chemin de chaque nœud

Sous la forme normalisée de la RFC 9535, donc directement collable dans le testeur JSONPath. Survolez une ligne et copiez-le.

Le nombre d’enfants

Un objet replié indique combien de clés il contient, un tableau combien d’éléments. Vous jugez la forme sans le déplier.

Les clés en double

Signalées sur place. Dans du texte brut, un doublon situé cinq cents lignes plus loin est pratiquement invisible.

Les nombres ayant perdu en précision

Signalés sur la valeur exacte. Un entier supérieur à 2^53-1 s’affiche avec ses chiffres d’origine et un avertissement indiquant que la plupart des analyseurs ne le liront pas ainsi.

Navigation au clavier

L’arbre est un véritable arbre ARIA, pas un tas d’éléments cliquables : il fonctionne comme un arbre doit fonctionner. Les flèches déplacent et déplient, Origine et Fin sautent aux extrémités, Entrée et Espace basculent. Il est atteignable et utilisable sans souris et s’annonce correctement à un lecteur d’écran.

C’est inhabituel dans cette catégorie, ce qui en dit plus sur la catégorie que sur nous.

Quand utiliser l’arbre et quand le texte brut

L’arbre est meilleur pour s’orienter : quelle forme a ce document, où est le champ dont j’ai besoin, jusqu’où descend-il. Le texte brut est meilleur pour éditer et pour chercher, et l’éditeur conserve la recherche plein texte avec Ctrl+F.

Pour tout ce que vous allez interroger de façon répétée, passez plutôt au testeur JSONPath. Écrire une expression, voir zéro correspondance et ajuster est une boucle plus rapide que de cliquer dans un arbre.

How to do this in code

Explorer un payload depuis un terminal, quand aucun navigateur n’est à portée.

# Top-level keys
jq 'keys' data.json

# The shape, without the values
jq 'walk(if type == "object" then map_values("...") else . end)' data.json

# Every distinct path in the document
jq -r 'paths | join(".")' data.json | sort -u

import json

with open('data.json') as f:
    data = json.load(f)

def walk(node, path=''):
    if isinstance(node, dict):
        for k, v in node.items():
            yield from walk(v, f'{path}.{k}')
    elif isinstance(node, list):
        for i, v in enumerate(node):
            yield from walk(v, f'{path}[{i}]')
    else:
        yield path, node

for path, value in walk(data):
    print(path, '=', value)

// console.dir gives you a collapsible tree in the terminal
console.dir(JSON.parse(text), { depth: null, colors: true });

Questions fréquentes

Quelle taille de fichier peut-il ouvrir ?

La contrainte n’est pas l’analyse, c’est la mémoire. Un document de 10 Mo construit un arbre d’environ 294 Mo : confortable sur un ordinateur de bureau, limite sur un téléphone. Au-delà de 25 Mo environ, cela se sent. L’arbre n’est construit que lorsque cette page en a besoin, donc le formateur et le validateur gèrent des fichiers bien plus gros.

Pourquoi seules certaines branches se déplient à la fois ?

« Tout déplier » est délibérément borné à six niveaux. Déplier chaque nœud d’un gros document produit des centaines de milliers de lignes et n’aide personne.

Puis-je éditer dans l’arbre ?

Non. L’édition se fait dans le panneau de texte, qui offre l’annulation, la recherche et une prise en charge complète du clavier. Un éditeur d’arbre est un autre produit, et un moins bon éditeur de texte.