Visualizador de JSON

A visualização em árvore serve para explorar um payload que você não escreveu. Recolha as partes que não interessam, expanda as que interessam, e copie o caminho de qualquer valor para alcançá-lo no código.

Ela foi feita para documentos grandes. Os nós só são renderizados quando o pai está expandido, então um arquivo de 10 MB recolhido custa o tamanho da raiz e não a quantidade de nós.

O que a árvore mostra

Além da estrutura em si, algumas coisas difíceis de enxergar no texto cru.

O caminho de cada nó

Na forma normalizada da RFC 9535, então cola direto no testador de JSONPath. Passe o mouse sobre uma linha e copie.

Contagem de filhos

Um objeto recolhido diz quantas chaves tem, e um array quantos itens. Dá para julgar o formato sem expandir.

Chaves duplicadas

Marcadas ali mesmo. No texto cru, uma duplicata a quinhentas linhas da gêmea é praticamente invisível.

Números que perderam precisão

Sinalizados no valor exato. Um inteiro acima de 2^53-1 aparece com os dígitos originais e um aviso de que a maioria dos parsers não vai lê-lo assim.

Navegação por teclado

A árvore é uma árvore ARIA de verdade, não um monte de elementos clicáveis, então funciona como uma árvore deve funcionar: as setas movem e expandem, Home e End pulam para as pontas, Enter e Espaço alternam. Dá para alcançar e operar sem mouse, e ela se anuncia corretamente a um leitor de tela.

Isso é incomum nesta categoria, o que diz mais sobre a categoria do que sobre nós.

Quando usar a árvore e quando usar o texto cru

A árvore é melhor para se situar: que formato é este, onde está o campo de que preciso, quão fundo isso vai. O texto cru é melhor para editar e para buscar, e o editor mantém a busca de texto completo com Ctrl+F.

Para qualquer coisa que você vá consultar repetidamente, vá ao testador de JSONPath. Escrever uma expressão, ver zero correspondências e ajustar é um ciclo mais rápido do que clicar por uma árvore.

How to do this in code

Explorando um payload pelo terminal, quando não há um navegador por perto.

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

Perguntas frequentes

Qual o maior arquivo que ele abre?

O limite não é o parsing, é a memória. Um documento de 10 MB monta uma árvore de cerca de 294 MB, o que é confortável em um desktop e apertado em um celular. Acima de uns 25 MB você sente. A árvore só é montada quando esta página precisa dela, então o formatador e o validador dão conta de arquivos bem maiores.

Por que só alguns ramos expandem de uma vez?

"Expandir tudo" é limitado de propósito a seis níveis. Expandir cada nó de um documento grande produz centenas de milhares de linhas e não ajuda ninguém.

Dá para editar na árvore?

Não. A edição acontece no painel de texto, que tem desfazer, busca e suporte completo de teclado. Um editor de árvore é outro produto e um editor de texto pior.