Skip to content
jsonbeautifiers
English

JSON to Table

Render an array of objects as a sortable table you can read.

JSON
CSV
Table

Nothing you paste leaves your browser. The connect-src allowlist makes that a browser guarantee rather than a promise. Check it yourself

An array of objects rendered as a table you can actually read, with every column discovered across every row rather than sampled from the first one.

That last point is the whole difference. A converter that reads the keys of element zero silently drops every field that only appears later, and you find out downstream when a column is missing.

How rows and columns are decided

An array of objects
One row per element. The obvious case and the common one.
A wrapper object
A payload shaped like {"ok": true, "data": [...]} uses the array as the row source, and says so, because that is a guess rather than a rule.
A single object
One row.
An array of scalars
A single column named value.
Columns
The union of every path across every row, in the order each was first seen.

Nested values inside a cell

Nested objects become dotted columns: address.city rather than a cell containing JSON. Nested arrays are rendered as JSON inside the cell here, because a table with tags.0 through tags.47 as separate columns is not a table anyone can read.

If you want the index-column form, or one row per array element, use the JSON to CSV page where those policies are configurable.

How to do this in code

Producing a table from JSON in code.

py Python
import pandas as pd

df = pd.json_normalize(records)
print(df.to_markdown(index=False))
df.to_csv('out.csv', index=False)
sh jq

The map(keys) | add | unique part is what makes this take the union rather than the first object.

# Header row from the union of all keys, then the rows
jq -r '(map(keys) | add | unique) as $cols
       | $cols, (.[] | [.[$cols[]]])
       | @csv' records.json
js JavaScript
const columns = [...new Set(records.flatMap(Object.keys))];
const rows = records.map((r) => columns.map((c) => r[c] ?? ''));

console.table(records);   // in a browser console or Node

Questions

Why is a column empty for some rows?
Because that key is absent from those objects. The column exists because at least one row has it. An empty cell means the key was missing; a cell containing null means the key was present with a null value.
Can I sort by a column?
Not in this preview. Download the CSV and sort it in a spreadsheet, or query the document with JSONPath if you need a filtered subset.