Ir para o conteúdo
jsonbeautifiers
Português

JSON para tabela

Mostra um array de objetos como uma tabela ordenável e legível.

JSON
CSV
Tabela

Nada do que você cola sai do seu navegador. A lista de permissões connect-src transforma isso em uma garantia do navegador, e não em uma promessa. Confira você mesmo

Um array de objetos renderizado como uma tabela que dá para ler de verdade, com todas as colunas descobertas em todas as linhas em vez de amostradas na primeira.

Esse último ponto é toda a diferença. Um conversor que lê as chaves do elemento zero descarta em silêncio todo campo que só aparece depois, e você descobre lá na frente, quando falta uma coluna.

Como linhas e colunas são decididas

Um array de objetos
Uma linha por elemento. O caso óbvio e o mais comum.
Um objeto invólucro
Um payload no formato {"ok": true, "data": [...]} usa o array como fonte das linhas, e diz isso, porque é um palpite e não uma regra.
Um único objeto
Uma linha.
Um array de escalares
Uma só coluna chamada value.
Colunas
A união de todos os caminhos em todas as linhas, na ordem em que cada um apareceu pela primeira vez.

Valores aninhados dentro de uma célula

Objetos aninhados viram colunas com ponto: address.city em vez de uma célula contendo JSON. Arrays aninhados são renderizados aqui como JSON dentro da célula, porque uma tabela com tags.0 até tags.47 como colunas separadas não é uma tabela que alguém consiga ler.

Se você quiser o formato com colunas indexadas, ou uma linha por elemento do array, use a página JSON para CSV, onde essas políticas são configuráveis.

How to do this in code

Produzindo uma tabela a partir de JSON em código.

py Python
import pandas as pd

df = pd.json_normalize(records)
print(df.to_markdown(index=False))
df.to_csv('out.csv', index=False)
sh jq

A parte map(keys) | add | unique é o que faz isso pegar a união em vez do primeiro objeto.

# Header row from the union of all keys, then the rows
jq -r '(map(keys) | add | unique) as $cols
       | $cols, (.[] | [.[$cols[]]])
       | @csv' records.json
js JavaScript
const columns = [...new Set(records.flatMap(Object.keys))];
const rows = records.map((r) => columns.map((c) => r[c] ?? ''));

console.table(records);   // in a browser console or Node

Perguntas frequentes

Por que uma coluna fica vazia em algumas linhas?
Porque aquela chave não existe nesses objetos. A coluna existe porque pelo menos uma linha tem. Uma célula vazia significa que a chave estava faltando; uma célula com null significa que a chave estava lá com valor null.
Dá para ordenar por uma coluna?
Nesta pré-visualização, não. Baixe o CSV e ordene em uma planilha, ou consulte o documento com JSONPath se precisar de um subconjunto filtrado.