About the JSON Grid Viewer
See an array of JSON objects as a sortable, searchable table - the quickest way to scan API results and datasets.
- Paste JSON (ideally an array of objects) into the editor, or click Load Sample.
- Generate the grid; each object becomes a row and each key a column.
- Sort by clicking a column header, search across all cells, and hide columns you don't need.
- Open a row for its full details, then export the grid as JSON or CSV.
- Nested objects stay nested inside their cell, so you can drill into them without flattening your data.
- Large results are paginated to keep the page fast.
- Need a spreadsheet? Export CSV, or use JSON to CSV.
How JSON becomes a table
JSON from APIs and databases is usually an array of objects - a list of users, orders or events. That shape maps naturally onto a table, and a table is far easier to scan, sort and filter than hundreds of lines of nested JSON.
Conversion rules
- Array of objects: each object becomes a row. The columns are every key found in any object, so records with different fields still line up.
- Missing keys show as empty cells rather than breaking the table.
- Nested objects and arrays render as small tables inside their cell, so no data is lost or flattened.
- A single object is shown as a two-column key/value table. An array of plain values is shown as a single column.
Example
This array of three objects:
[
{ "id": 1, "name": "Ada", "city": "London", "tags": ["admin", "beta"] },
{ "id": 2, "name": "Ben", "tags": ["beta"] },
{ "id": 3, "name": "Cara", "city": "Paris" }
]becomes a grid with the columns id, name, city and tags:
| id | name | city | tags |
|---|---|---|---|
| 1 | Ada | London | ["admin", "beta"] |
| 2 | Ben | ["beta"] | |
| 3 | Cara | Paris |
Ben has no city, so that cell is empty. Cara has no tags, so that cell is empty too. The tags arrays stay intact inside their cells.
Working with the grid
- Sort by clicking a column header; click again to reverse the order.
- Search across every cell at once, with matches highlighted, or type in a column's Filter box to narrow one column.
- Show or hide columns with the ⚙ button to focus on the fields that matter.
- Open a row with the ⋮ button to see the full record as formatted JSON.
- Export to JSON or CSV. The export includes every row that matches your search and filters - not just the current page - in the current sort order and with only the visible columns.
Common uses
- Scanning a paginated API response to spot missing or unexpected values.
- Checking a dataset or database export before importing it somewhere else.
- Finding a specific record in a large array without writing a query.
- Turning a filtered subset of JSON records into a CSV file for a spreadsheet.
Frequently asked questions
What JSON structure works best?
An array of objects at the top level, such as [{...}, {...}]. If your records are wrapped in an object like {"data": [...]}, paste just the inner array, or extract it first with JSONPath using $.data.
How are nested values exported to CSV?
CSV has no nesting, so nested objects and arrays are written into their cell as JSON text. For more control over flattening nested data, use JSON to CSV.
Can I edit values in the grid?
The grid is for viewing, sorting and filtering. To change values, edit the JSON in the input pane and click Generate Grid again, or use the JSON Editor.
Is my data uploaded?
No. Parsing, sorting, searching and export all happen in your browser.