Visualizzatore JSON

La vista ad albero serve a esplorare un payload che non hai scritto tu. Comprimi le parti che non ti interessano, espandi quelle che ti interessano, e copia il percorso di qualsiasi valore per raggiungerlo nel codice.

È pensata per documenti grandi. I nodi vengono disegnati solo quando il genitore è espanso, quindi un file da 10 MB compresso costa quanto la sua radice e non quanto il suo numero di nodi.

Che cosa mostra l’albero

Oltre alla struttura, alcune cose difficili da vedere nel testo grezzo.

Il percorso di ogni nodo

Nella forma normalizzata della RFC 9535, quindi si incolla direttamente nel tester JSONPath. Passa sopra una riga e copialo.

Il conteggio dei figli

Un oggetto compresso dice quante chiavi contiene, un array quanti elementi. Puoi giudicarne la forma senza espanderlo.

Le chiavi duplicate

Segnalate sul posto. Nel testo grezzo, un duplicato a cinquecento righe dal suo gemello è di fatto invisibile.

I numeri che hanno perso precisione

Segnalati sul valore esatto. Un intero sopra 2^53-1 viene mostrato con le cifre originali e un avviso che la maggior parte dei parser non lo leggerà così.

Navigazione da tastiera

L’albero è un vero albero ARIA, non un mucchio di elementi cliccabili, quindi funziona come dovrebbe funzionare un albero: le frecce spostano ed espandono, Inizio e Fine saltano agli estremi, Invio e Spazio commutano. È raggiungibile e utilizzabile senza mouse e si annuncia correttamente a uno screen reader.

È una cosa insolita in questa categoria, il che dice più sulla categoria che su di noi.

Quando usare l’albero e quando il testo grezzo

L’albero è migliore per orientarsi: che forma ha questa cosa, dov’è il campo che mi serve, quanto scende in profondità. Il testo grezzo è migliore per modificare e per cercare, e l’editor mantiene la ricerca su tutto il testo con Ctrl+F.

Per qualsiasi cosa che interrogherai ripetutamente, passa al tester JSONPath. Scrivere un’espressione, vedere zero corrispondenze e correggere è un ciclo più rapido che cliccare dentro un albero.

How to do this in code

Esplorare un payload da terminale, quando non hai un browser a portata di mano.

# 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 });

Domande frequenti

Quanto può essere grande il file che riesce ad aprire?

Il vincolo non è l’analisi, è la memoria. Un documento da 10 MB costruisce un albero di circa 294 MB: comodo su un desktop, tirato su un telefono. Sopra i 25 MB circa si sente. L’albero viene costruito solo quando questa pagina ne ha bisogno, quindi il formattatore e il validatore reggono file molto più grandi.

Perché si espandono solo alcuni rami alla volta?

«Espandi tutto» è limitato di proposito a sei livelli. Espandere ogni nodo di un documento grande produce centinaia di migliaia di righe e non aiuta nessuno.

Posso modificare dentro l’albero?

No. Le modifiche si fanno nel pannello di testo, che ha annulla, ricerca e pieno supporto da tastiera. Un editor ad albero è un altro prodotto, e un editor di testo peggiore.