Como transformar JSON em tabela HTML
Mostre uma lista de registros como uma tabela que se lê num relance: no exemplo, Ada e Luis viram duas linhas sob os títulos nombre e rol, e o texto Luis <b> continua como texto em vez de deixar a página em negrito. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Roda direto no seu navegador. Grátis, sem cadastro — seus dados não são enviados para lugar nenhum.
Grátis, direto no navegador e sem cadastro — o jeito mais rápido de mostrar dados em uma página sem escrever código.
Por que as pessoas leem tabelas, e não dados brutos
Fora de uma equipe de desenvolvimento, ninguém quer ler dados brutos, por mais bem recuados que estejam, e mesmo assim a mesma lista de registros se entende num relance como tabela. Uma lista de pedidos, as respostas de uma pesquisa ou uma contagem de estoque chegam como dados de algum sistema, e cedo ou tarde uma pessoa precisa olhar para eles. Montar a tabela à mão para cada relatório é cansativo e fácil de errar, principalmente quando alguns registros têm campos que outros não têm. Esta ferramenta monta tudo em um só passo.
Como a tabela é montada
Cada nome diferente que aparece nos registros vira uma coluna com seu título, e cada registro vira uma linha; o valor que um registro não tem fica como célula vazia, e a tabela mantém o formato. Os caracteres especiais são escritos de forma segura, e é por isso que Luis <b> aparece no exemplo como texto. Um valor que contém uma seção aninhada é mostrado escrito dentro da célula. O resultado é uma tabela simples, sem estilo próprio, então ela assume a aparência da página ou do e-mail onde você a colar. Para dados que não são tabulares, a opção de lista mostra cada registro separado.
Como as colunas são montadas
Campos aninhados são achatados com nome composto (cliente.cidade), para que nada fique de fora, e registros com campos faltando geram células vazias em vez de desalinhar a tabela. Acentos e caracteres especiais saem escapados corretamente no HTML — "São Paulo" continua "São Paulo" na página publicada.
Onde usar o HTML gerado
O código é HTML limpo, sem dependências: cola em qualquer site, CMS, wiki interna ou e-mail que aceite HTML. Dali, você aplica o CSS do seu projeto para dar a cara final. Tudo roda grátis e sem limite no navegador — os dados não saem da página.
Perguntas frequentes
Preciso saber programar para usar?
Copiar e colar o HTML em um site ou e-mail não exige conhecimento de código.
A tabela vem com estilo visual?
O HTML sai limpo e semântico, sem estilos embutidos — de propósito, para herdar o CSS do lugar onde você colar. Assim a tabela fica com a cara do seu site, não com a nossa.
É grátis mesmo?
Sim: uso ilimitado no navegador, sem cadastro e sem marca d'água no código gerado.
Os dados que eu colo ficam guardados?
Não: a conversão roda no seu navegador e o conteúdo não é enviado para servidor nenhum.
Um texto como <b> dentro dos meus dados vira formatação?
Não. Os caracteres especiais dos seus valores são escritos de forma segura, então um nome como Luis <b> do exemplo aparece exatamente como foi digitado, em vez de deixar o resto da tabela em negrito. Isso também impede que um código perdido nos dados seja executado.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/data/json-to-html \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"json":[{"a":1}]}'const res = await fetch("https://api.kit.forhosting.com/data/json-to-html", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"json": [
{
"a": 1
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/data/json-to-html",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"json": [
{
"a": 1
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/data/json-to-html", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"json":[{"a":1}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"json":[{"a":1}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/data/json-to-html", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"json": [
{
"a": 1
}
]
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "data.json_to_html",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
max_mb | 25 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Esta ferramenta transforma um JSON em tabela HTML pronta para publicar: cada objeto vira uma linha, cada campo vira uma coluna, e você copia o código ou o resultado visual.
De dados crus a tabela publicável
Copia o código HTML e cola onde precisar. Você tem um JSON — exportado de um sistema, devolvido por uma API — e precisa que ele apareça bonito numa página, num e-mail ou num relatório interno. Em vez de escrever HTML à mão ou montar um script, cola o JSON aqui e recebe a tabela montada: cabeçalho com os nomes dos campos, uma linha por registro, células no lugar certo.
Como as colunas são montadas
A ferramenta percorre os objetos do JSON e usa os nomes dos campos como colunas.
Onde usar o HTML gerado
Para gerar tabelas automaticamente (um relatório por dia, por exemplo), a mesma capacidade funciona via API por US$ 0,002 por chamada, com documentos de até 25 MB.
Casos de integração
Publicar a tabela de preços no site
A lista de serviços da TecnoSul vive num JSON que o sistema atualiza. Convertida em tabela HTML, entra na página institucional sem depender do desenvolvedor para cada mudança de preço.
Relatório interno por e-mail
O resumo semanal de chamados sai do sistema em JSON. Virando tabela HTML, vai no corpo do e-mail para a equipe — legível no celular, sem anexo para baixar.
Documentação com dados de exemplo
Na wiki interna, Juliana Nascimento documenta a API mostrando as respostas como tabelas em vez de blocos de código — quem não programa também entende o que cada campo significa.
Perguntas técnicas
E se os objetos do JSON tiverem campos diferentes entre si?
A tabela reúne todos os campos encontrados; registros sem determinado campo ficam com a célula vazia. Nada é descartado silenciosamente.
Funciona com JSON grande?
Até 25 MB por documento. Só lembre que uma tabela HTML com centenas de milhares de linhas pode pesar no navegador de quem for abrir a página.