1001Ferramentas
🪜 Dev

JSON Flatten / Unflatten

Achate um JSON aninhado em chaves com notação de ponto (ex: user.address.city) e reconstrua o caminho inverso. Útil para exportar a CSV, gerar .env ou comparar configs. Tudo no navegador.

Quando usar?

Achatar JSON (flatten) transforma estruturas aninhadas em um único nível com chaves em notação de ponto. Útil para exportar para CSV/planilhas, gerar arquivos .env, comparar configurações, ou enviar campos a APIs que esperam pares chave/valor planos.

Reconstruir (unflatten) faz o caminho inverso. Use em scripts de migração, ao mesclar dados de planilhas em estruturas, ou para transformar variáveis de ambiente em config aninhada. Tudo no navegador — nada é enviado a servidores.

Do JSON aninhado à lista de chaves planas

Você tem um JSON cheio de níveis e precisa dele como pares chave/valor planos: para jogar numa planilha, montar um .env, comparar duas configs num diff ou preencher um sistema que só aceita campos simples. Achatar isso na mão é chato e fácil de errar. Aqui você cola o JSON e ele vira chaves em notação de ponto (user.address.city) na hora, enquanto digita. O modo Reconstruir faz o caminho de volta, do plano para o aninhado.

Dois detalhes fazem diferença na prática. Arrays podem sair com colchetes (tags[0]) ou como índice colado pelo separador (tags.0) — o formato com colchetes é o que o modo Reconstruir usa para saber que ali é um array, e não um objeto com uma chave chamada 0. Arrays e objetos vazios são preservados como [] e {}, em vez de sumirem no caminho. E na reconstrução, chaves como __proto__, constructor e prototype são bloqueadas de propósito: são o vetor clássico de prototype pollution em JavaScript.

Se alguma chave do seu JSON já contém ponto, troque o separador (o campo aceita até 3 caracteres, __ funciona bem) antes de achatar, senão a reconstrução vai quebrar essa chave em dois níveis. Um teste rápido de sanidade: achate, cole o resultado no modo Reconstruir e confira se voltou igual ao original. Tudo roda no seu navegador — o JSON não é enviado a servidor nenhum, então dá para colar config interna sem preocupação.

Perguntas frequentes

O que acontece com arrays e objetos vazios?
São preservados como [] e {}. Sem isso, o ciclo de achatar e reconstruir perderia informação.
Posso usar outro separador em vez de ponto?
Sim, o campo Separador aceita até 3 caracteres. É útil quando as chaves já contêm ponto, como nomes de domínio ou números de versão.
Por que aparece erro com uma chave __proto__?
A reconstrução recusa __proto__, constructor e prototype de propósito, para evitar ataques de prototype pollution.

Ferramentas Relacionadas