JSON data and HTML tables are two shapes for the same information: rows of records with named fields. Converting between them is a routine job for developers building dashboards, reports, and admin pages. This guide shows you the method, including the edge cases that break naive converters.
The basic shape
Take an array of objects like [{“name”: “Alice”, “age”: 30}, {“name”: “Bob”, “age”: 25}]. The keys become table headers: Name and Age. Each object becomes one row, with its values in the matching columns. That is the whole conversion for clean, flat data.
Step-by-step: convert JSON to a table
- Check the JSON is valid. One missing comma or bracket breaks the whole conversion.
- Collect the column list from the keys of the first object, then scan the rest: any new key found later must become a column too, or its data will be lost.
- Build the header row from the column list.
- For each object, build a row, placing each value under its column.
- Leave cells empty where an object lacks a key, instead of shifting later values left.
- Escape HTML in every value before inserting it, so characters like < and > display as text instead of breaking the table.
Handling nested objects and arrays
Real data is rarely flat. A value that is itself an object or an array needs a decision: flatten it into readable text, show it as formatted JSON inside the cell, or expand it into extra columns. Flattening works for display; expanding works when the nested data must stay searchable. Never just print [object Object], which is what happens when nested data is inserted without handling.
Common mistakes
Forgetting to escape HTML is the most dangerous error: a value containing a script tag could execute in the page. Dropping keys that appear only in later objects is the most common data-loss error. Shifting values when a key is missing is the most confusing one, because the table looks complete but every column after the gap is wrong.
Try it the faster way
Paste your JSON into the tool below to convert it to an HTML table instantly.
Prefer the full page? Open the JSON to HTML table converter directly.
Quick tips
- Always escape values before building HTML.
- Collect columns from all objects, not just the first.
- Leave missing values blank rather than shifting the row.
JSON to table conversion is straightforward for flat data and a matter of decisions for nested data. Handle escaping, missing keys, and nesting deliberately, and the table will be correct.
Frequently asked questions
What if my JSON objects have different keys? Collect the union of all keys as the column list, and leave cells empty where an object lacks a key. Using only the first object’s keys silently drops data from later objects, which is worse than an empty cell.
How should I display nested arrays in a table cell? Join short arrays with commas for display, or show them as formatted JSON for technical readers. For long arrays, consider a separate detail view instead of cramming everything into one cell.
Is it safe to insert JSON values directly into HTML? No. Escape every value first, converting <, >, and & to their safe forms. Unescaped values can break the table layout or, worse, run scripts if the data comes from untrusted sources.
Worked example
Convert [{“name”: “Alice”, “age”: 30}, {“name”: “Bob”, “city”: “Paris”}]. The column list must include name, age, and city, since city appears only in the second object. The table then has three columns: Alice’s row shows 30 under age and an empty cell under city, while Bob’s row shows an empty age cell and Paris under city. If the converter used only the first object’s keys, Bob’s city would vanish entirely. Empty cells are honest; shifted values are not.