JSON to HTML Table

Turn a JSON array of objects into an HTML table. The other direction is HTML table to JSON · JSON to CSV

What this page does

A JSON array of objects is easier to scan as a table. This page writes an HTML table in the browser. The other direction is HTML table to JSON. A CSV of the same rows is JSON to CSV.

How to use it

  1. Paste JSON. Update as you type is on.
  2. Convert runs once. Show Example fills [{"id":1,"name":"Ada","ok":true},{"id":2,"name":"Grace","ok":false}].
  3. The result is a table. The head cells are id, name and ok. The first row is 1, Ada, true. The second row is 2, Grace, false.
  4. Clear All empties both boxes. Copy Result copies the HTML.

Rules and edges

An array of objects uses one column per key, in the order the keys first appear. A single object becomes two columns, a th for the key and a td for the value, with no head row. An array of plain values uses the head cell value. A nested object or array is written as JSON text inside the cell. An empty array, an empty object, a bare number or a bare string stops with an error.

Where people use it

  • Pasting an API list into a page as a table.
  • Checking two rows before sending them through the reverse page.
  • Reading a boolean next to a name without a JSON viewer.

Questions

Why is the reverse page not the same JSON?

The table stores cell text. Coming back, 1 and true are the strings "1" and "true".

Where did a nested object go?

It stays in the cell as JSON text, not as another table.