What is JSON to table and why use it?
JSON arrays of objects, typical of API responses and DB dumps, are hard to scan as raw text. Rendering them as a table with a union-of-keys column set makes fields, gaps, and outliers instantly visible and sortable, with no spreadsheet import needed.
Columns are the union of all keys, one row per element. Click any header to sort. Runs 100% in-browser with repair-aware parsing so messy JSON still renders.
Edge cases & gotchas
- Column set = union of keys across all rows, not just the first object's keys.
- Objects with differing schemas produce sparse cells, not errors.
- A top-level object (not an array) renders as a key/value table.
- A primitive array (
[1,2,3]) renders as a single-column table. - Nested objects don't auto-explode into columns. Flatten first for deep structures.
- Numeric-looking strings vs numbers can affect header sort order; sort compares by value type.
How to use
- Paste a JSON array of objects (e.g. an API response) into the Input pane.
- The tool builds columns from the union of every object's keys.
- Each array element becomes a row; missing keys render as empty cells.
- Click a column header to sort rows by that field (toggle asc/desc).
- Nested objects/arrays show inline. Flatten first with Flatten JSON for deep nesting.
Examples
Array of objects → sortable table
[{"id":1,"name":"Ann"},{"id":2,"name":"Bob"}]id | name 1 | Ann 2 | Bob
Edge case: ragged/union keys
[{"id":1,"name":"Ann"},{"id":2,"email":"[email protected]"}]id | name | email 1 | Ann | 2 | | [email protected]
Single object → key/value table
{"name":"api","port":8080}key | value name | api port | 8080
FAQ
How are arrays of objects converted?
Each unique key across all objects becomes a column; each object becomes a row.
What if objects have different keys?
Columns are the union of all keys; absent keys render as empty cells, so no data is dropped.
How is nested JSON handled?
Nested objects and arrays display inline within the cell. Use Flatten JSON to break them into dot-path columns first.
Can I sort the table?
Yes. Click a column header to sort by that field.
Does my data get uploaded?
No. Everything runs client-side; verify in DevTools → Network.
Does it handle invalid JSON?
Repair-aware parsing auto-fixes trailing commas, single quotes, and comments before rendering.