Pular para o conteúdo

Visualizador de árvore JSON

Explore o JSON como uma árvore recolhível e pesquisável com tipos codificados por cores e clique em qualquer chave para copiar seu caminho em notação de ponto.

 

Como funciona

Esta ferramenta interpreta JSON e o exibe como uma árvore recolhível, com cores diferentes para cada tipo: string, número, booleano ou null. A caixa de pesquisa filtra as chaves e os valores correspondentes, e cada chave tem um botão para copiar seu caminho completo em notação de ponto, como address.city ou tags[0].

  1. Colar JSON

    Qualquer objeto, array ou valor JSON válido.

  2. Expandir, recolher ou pesquisar

    Clique na seta para recolher um ramo ou digite para filtrar.

  3. Clique em uma chave para copiar seu caminho

    Cole o caminho diretamente no seu código.

Lendo a árvore

Cada linha mostra uma chave ou um índice entre colchetes para itens de array, seguido pelo seu valor. Objetos e arrays mostram uma contagem de seus filhos e podem ser recolhidos em uma única linha. O caminho exibido ao copiar uma chave segue o acesso normal a propriedades JavaScript: um campo de objeto aninhado é unido com um ponto, address.city, e um índice de array é unido com colchetes, tags[0].

Executa no seu navegador, sem limite de tamanho imposto

A análise e a renderização ocorrem inteiramente em JavaScript nesta página; seu JSON, que pode conter dados pessoais, chaves de API ou estruturas internas, nunca é enviado para nenhum lugar. Não há limite codificado de profundidade ou tamanho, mas um documento JSON com muitos milhares de nós pode tornar a página lenta para renderizar, já que cada nó se torna um elemento DOM. Para arquivos muito grandes, recolha os ramos de nível superior que você não precisa ou use a caixa de pesquisa para ir diretamente a uma chave.

Perguntas frequentes

Como exploro visualmente um objeto JSON aninhado complexo?

Cole seu JSON na área de entrada e clique em Analisar JSON. A ferramenta renderiza uma árvore recolhível onde cada ramo pode ser expandido ou recolhido individualmente. Strings aparecem em verde, números em azul, booleanos em âmbar e valores null em itálico cinza. Use Expandir tudo ou Recolher tudo para navegar rapidamente por estruturas grandes ou digite na caixa de pesquisa para filtrar por chaves e valores correspondentes.

Como copio o caminho para uma chave JSON aninhada?

Clique em qualquer chave ou índice de array na visualização em árvore renderizada. A ferramenta copia o caminho completo em notação de ponto, por exemplo address.city ou tags[0], para sua área de transferência. Isso é particularmente útil ao escrever código para acessar um valor profundamente aninhado e você precisa do caminho exato sem contar manualmente índices de array ou encadear nomes de propriedades.

Meus dados JSON são enviados para um servidor ao usar o visualizador de árvore JSON?

Não. A análise e a renderização ocorrem inteiramente no seu navegador usando JavaScript. Seus dados JSON, que podem conter informações pessoais, chaves de API ou estruturas de dados internas, nunca são enviados ou transmitidos para nenhum lugar. A ferramenta é segura para uso com qualquer conteúdo JSON.

Qual é a profundidade ou tamanho máximo de JSON que este visualizador em árvore pode processar?

O renderizador de árvore não tem um limite de profundidade fixo, mas arquivos JSON muito grandes ou profundamente aninhados, com centenas de níveis ou milhares de nós, podem tornar a página lenta para renderizar, pois cada nó gera elementos DOM. Para arquivos JSON muito grandes, recolha os nós no nível superior e expanda apenas as seções necessárias, ou use a caixa de pesquisa para filtrar diretamente a chave que você procura.

Quais tipos o visualizador de árvore JSON reconhece e codifica por cores?

A ferramenta reconhece e codifica por cores quatro tipos primitivos: string (verde), número (azul), booleano (âmbar) e null (cinza em itálico). Arrays e objetos aparecem como ramos que podem ser expandidos ou recolhidos, com a quantidade de elementos em cada um. Isso facilita a identificação de incompatibilidades de tipo, por exemplo, quando um campo que deveria ser um número é, na verdade, uma string entre aspas.