Árvore JSON
Explore JSON como árvore dobrável com distintivos de tipo, caminhos JSON Pointer e pesquisa
JSON
Árvore
Cole JSON à esquerda e clique em Construir árvore.
Árvore JSON
Explore JSON como árvore dobrável com distintivos de tipo, caminhos JSON Pointer e pesquisa
Recursos
- Árvore dobrável recursiva: cada nó objecto e array tem o seu próprio interruptor expandir/dobrar, raiz expandida por defeito para estrutura imediatamente visível
- JSON Pointer (RFC 6901) por nó — passe o rato sobre qualquer chave para ver o caminho completo, clique no ícone de corrente para copiar para uso em patches, diffs ou instancePath de esquema
- Distintivos com tipo colorem cada nó conforme o tipo real (string / number / boolean / null / array / object) — null já não se esconde atrás de 'object' como em typeof do JavaScript
- Coluna pré-visualização mostra resumo numa linha: escalares em linha, arrays como `[ N ]` com cardinal, objectos como `{ N }` com número de chaves — tamanho explorável antes de expandir
- Filtro de pesquisa corresponde a nomes de chave, caminhos JSON Pointer e texto de pré-visualização; a árvore dobra-se apenas a ramos com hit, tornando pesquisas em documentos de 10 MB tratáveis
- Botão copiar valor escreve o valor do nó para a área de transferência — strings como texto bruto, tipos complexos como JSON pretty-print pronto para colar noutra ferramenta
- Erros de parsing incluem a mensagem completa do motor JavaScript (frequentemente com linha/coluna) para corrigir a entrada em vez de adivinhar
- Puramente do lado cliente: a entrada nunca sai do navegador, a árvore inteira é construída em memória, sem telemetria, e a página funciona offline após ser cacheada
Como usar
- Cole JSON na área à esquerda ou clique Carregar exemplo para um exemplo pequeno.
- Clique Construir árvore. A raiz é mostrada expandida; clique no chevron junto a qualquer nó objecto/array para descer.
- Use a caixa de pesquisa para filtrar por nome de chave, valor ou caminho JSON Pointer — apenas ramos correspondentes ficam visíveis.
- Passe o rato sobre uma chave para ver o seu caminho JSON Pointer na dica; clique no ícone de corrente para copiar.
- Clique no ícone copiar para obter o valor do nó — escalares em bruto, objectos/arrays como JSON pretty-print.
- Use Expandir tudo / Dobrar tudo para virar a árvore inteira de uma vez.
Dicas e Melhores Práticas
- Mantenha Shift premido ao clicar num toggle para dobrar/desdobrar ramos inteiros mais depressa — quando o atalho do SO estiver mapeado, o botão toggle continua a funcionar individualmente.
- Pesquise um valor (não apenas uma chave) ao depurar — texto de pré-visualização está incluído na correspondência.
- Copie um JSON Pointer daqui e cole no relatório de erros do JSON Schema Validator para confirmar o nó exacto que quebrou a validação.
- Se a árvore parece lenta, dobre primeiro o maior array — arrays longos dominam o custo de renderização.
- Combine com JSON Diff: copie um valor antes/depois de uma alteração para ver a edição precisa ao nível do nó.
Perguntas Frequentes
O que é um JSON Pointer e como se usa?
Um JSON Pointer (RFC 6901) é um caminho separado por barras que nomeia exactamente um nó num documento JSON: `/owner/name` é o campo name do objecto owner; `/tags/1` é o segundo elemento do array tags. A raiz é a string vazia (mostrada aqui como `/`). Esta ferramenta usa o mesmo formato que os erros instancePath do JSON Schema e ferramentas como fast-json-patch, por isso pode copiar um pointer daqui e usá-lo como referência directa noutro lado.
Como difere o distintivo de tipo do typeof do JavaScript?
De duas formas. Primeiro, null mostra como 'null' (typeof null === 'object' em JavaScript — uma verruga de longa data). Segundo, arrays mostram como 'array' em vez de 'object' do typeof, porque renderizam e comportam-se diferente. Isto corresponde aos seis tipos de valor da spec JSON: string, number, boolean, null, array, object.
Como funciona a pesquisa?
A consulta é correspondida insensível a maiúsculas/minúsculas contra a chave, caminho JSON Pointer e string de pré-visualização do nó. Um ramo permanece visível se ele ou qualquer descendente corresponder — pode portanto pesquisar um valor profundamente aninhado e ainda ver as chaves no caminho até ele. Limpe a caixa para restaurar a árvore completa.
Aguenta JSON muito grande?
Constrói a árvore inteira em memória uma vez, por isso documentos à escala do megabyte renderizam confortavelmente. JSON de várias centenas de megabytes pode ficar apertado em telefones com pouca RAM; para essa gama prefira ferramentas de streaming ou corra JSON Minify primeiro para remover espaços em branco. O renderizado não é virtualizado — cada nó visível renderiza para um elemento DOM — por isso dobrar ramos grandes é o truque se ficar lento.
Dobrar um nó perde os seus dados?
Não. Dobrar é puramente visual — o objecto analisado subjacente permanece em memória, por isso re-expandir mostra o mesmo conteúdo instantaneamente. A pesquisa ignora o estado dobrado e revela hits dentro de nós dobrados.
Porque é que a pré-visualização mostra `{ 0 }` para um objecto vazio?
O número entre chavetas é o número de chaves para objectos e o comprimento para arrays. Objectos com zero chaves e arrays com comprimento zero são JSON válido e não são o mesmo valor (`{}` vs `[]`), por isso mostrar a contagem e as chavetas torna o tipo e tamanho óbvios num relance.
Qual a diferença para a vista árvore no JSON Formatter?
A árvore do JSON Formatter é um de muitos separadores (juntamente com pretty-print, JSONPath, validação de esquema, transformações, diff). Esta ferramenta é a vista árvore-apenas independente: um URL, um trabalho, interacção mais profunda por nó (distintivos de tipo, cópia de pointer por nó, cópia de valor por nó) sem a superfície de formatação/transformação/validação.
É enviado algo para um servidor?
Não. O JSON fica no seu navegador, parsing e construção da árvore correm sincronamente no mesmo contexto JavaScript que renderizou a página, e o separador Rede não mostra pedidos ao clicar Construir árvore. Após o primeiro carregamento a página funciona offline.