JSON a tabla HTML

Cómo funciona

Pegue su JSON en el panel izquierdo; el código de la tabla HTML aparece enseguida a la derecha. Un array de objetos (registros entre llaves dentro de corchetes) se convierte en tabla renglón por renglón: los encabezados de columna reúnen las claves de todos los registros y un campo que falta en un registro queda como celda vacía. Si pega un solo objeto, obtiene una tabla de dos columnas "Campo / Valor". El ejemplo tiene dos personas; la segunda no tiene colonia pero sí un campo "nota". Con "Aplanar", el objeto direccion se divide en las columnas direccion.ciudad y direccion.colonia, el resultado es de 2 filas por 5 columnas y las celdas que faltan quedan vacías. Con "Tabla interna", se dibuja una tabla pequeña dentro de la celda de dirección. Las listas simples como [1, 2, 3] se escriben "1, 2, 3". Un texto como "Precio < 100 & en existencia" se escapa con &lt; y &amp;; se ve igual en la página, pero el navegador no lo toma por una etiqueta. Pegue el código en un bloque "HTML personalizado" de WordPress o en la vista de código de una plantilla de correo.

Esta herramienta también se busca como convertir json a tabla html, json a html, ver json como tabla, json a tabla, json to html, json to html table.

¿Qué es JSON?

JSON (JavaScript Object Notation) es un formato común para llevar datos como texto. Las llaves {} contienen un objeto formado por pares clave-valor y los corchetes [] una lista ordenada; los valores pueden ser texto, números, true/false, null o, de nuevo, objetos y listas. La mayoría de los servicios web y las aplicaciones envían sus datos en JSON. Es texto legible, pero no tiene un formato visual como una tabla; para mostrarlo en una página hay que convertirlo a HTML.

¿Qué es Aplanar (flatten)?

Aplanar es reunir cada valor de una estructura anidada bajo una clave de un solo nivel. La ruta se escribe uniendo las claves con puntos: {"direccion": {"ciudad": "Puebla"}} se vuelve direccion.ciudad = Puebla. Así los datos anidados caben en una tabla de filas y columnas. Aplanar no pierde información, pero en estructuras muy profundas o con muchos campos multiplica rápido las columnas; ahí una tabla interna se lee mejor.

¿Qué diferencia hay entre JSON a CSV y JSON a tabla HTML?

Las dos acomodan los registros del JSON en filas y columnas, pero el resultado va a lugares distintos. El CSV son solo datos; sirve para abrirlo en Excel o importarlo en otro programa y no lleva formato. La tabla HTML es código hecho de etiquetas; se muestra directamente en una página web, en una entrada de blog o en un correo HTML, y puede llevar celdas de encabezado y tablas internas. Si va a trabajar con los datos, use CSV; si los va a mostrar, la tabla HTML.

Aplanar o tabla interna

Aplanar convierte cada campo de un objeto anidado en su propia columna, unida con puntos: {"direccion": {"ciudad": "Guadalajara"}} escribe Guadalajara en la columna direccion.ciudad. La tabla queda en un solo nivel, se puede ordenar por columnas y, al copiarla a Excel, las celdas caen en su lugar. En la mayoría de los casos es la opción correcta.

La tabla interna conserva la estructura anidada: dentro de la celda de dirección se dibuja una tabla pequeña con los renglones ciudad y colonia. Cuando los registros traen subobjetos de distinta profundidad o con muchos campos (como la lista de productos de un pedido), la tabla interna sigue siendo legible donde aplanar daría decenas de columnas. En este modo, los arrays de objetos también pasan a tablas internas.

• {"direccion": {"ciudad": "Puebla"}} → aplanar: columna direccion.ciudad
• [{"a":1},{"b":2}] → columnas a y b, los huecos quedan vacíos
• "<b>nuevo</b>" → &lt;b&gt;nuevo&lt;/b&gt; (no se vuelve negrita)

Escape: por qué el texto del JSON no se pega tal cual

Los datos JSON suelen venir de una API o de un formulario que llenan los usuarios. Si un campo contiene un texto como <script> o <img onerror=...> y llega a la página sin escapar, puede ejecutarse código en el navegador de quien la visita; a esto se le llama cross-site scripting (XSS). Esta herramienta escapa cada clave y cada valor con la biblioteca he: <, >, &, comillas y apóstrofos pasan a entidades.

El texto escapado se ve exactamente igual en la página; lo único que se pierde es la posibilidad de que se lea como código. Para dar estilo a la tabla, deje el código como está y escriba reglas CSS para table, th y td en su sitio; con un tema ya hecho, la tabla toma el aspecto del tema.

Preguntas frecuentes

¿Cómo se convierte JSON a una tabla HTML?

Pegue el JSON en el panel izquierdo. Si es un array de objetos, cada objeto es un renglón y cada clave una columna; un solo objeto da una tabla Campo/Valor. Copie el código del panel derecho en el editor HTML de su página.

¿Qué pasa si los registros tienen campos distintos?

Las columnas reúnen las claves de todos los registros, en el orden en que aparecen por primera vez. Un campo que falta recibe una celda vacía; ningún valor se recorre ni cae bajo la columna equivocada.

¿Cómo se ve un JSON anidado en la tabla?

Con "Objetos anidados" en "Aplanar" se forman nombres de columna con punto, como direccion.ciudad. Si elige "Tabla interna", los objetos anidados y las listas de objetos se escriben en una tabla pequeña aparte, dentro de la celda.

¿Los datos que pego se envían a algún lado?

No. La conversión se hace por completo en su navegador; aunque pegue una lista de clientes o la respuesta de una API, los datos no salen de esta página.