How to use the json table viewer
- Paste or type a JSON array of objects into the input area.
- The json table viewer parses the input automatically as you type.
- Review the formatted table output where each object becomes a row and each unique key becomes a column.
- Copy the plain-text table to use in documentation, terminal output or notes.
How the table is built
The tool uses JSON.parse to read the input string. If parsing succeeds and the result is an array, it iterates over every element. For each element that is a plain object, it records every key it encounters. Keys are collected in order of first appearance across all rows.
Once the full set of columns is known, the tool formats each value. Strings, numbers and booleans are converted directly. Nested objects and arrays are serialized back to compact JSON using JSON.stringify. Null values and missing keys render as empty cells. Each column is then padded to match its widest entry, producing aligned text output.
Example output
Given this input array containing two objects with id, name and active fields, the json table viewer produces a pipe-delimited grid. The header row lists the keys, a separator row follows, and each subsequent row holds the corresponding values. If some objects lack certain keys, those cells remain blank rather than showing undefined or null, keeping the table clean.
For instance, an array with Alice (active true) and Bob (active false) yields three columns labeled id, name and active. The numeric ids align left alongside the text names and boolean flags, making it easy to scan without opening a spreadsheet or writing custom code.
Handling nested data
When a value is itself an object or an array, the viewer serializes it into a single-line JSON string. For example, a field like {"address": {"city": "Paris"}} appears in the table cell as {"city":"Paris"}. This keeps the tabular layout intact while preserving the full data structure.
If you need to work with deeply nested structures more extensively, consider using json flatten first to expand nested paths into top-level keys, then paste the flattened result here.
Common mistakes and edge cases
A frequent error is pasting a single JSON object instead of an array. The input must start with [ and end with ], containing comma-separated objects inside. Wrapping a lone object in brackets fixes this immediately.
Another issue is trailing commas, which are invalid in standard JSON. Remove any comma after the last element in an array or the last property in an object. Single quotes around keys or string values also cause parse failures because JSON requires double quotes.
Unicode characters, including emoji and non-Latin scripts, are handled correctly because JavaScript strings are natively UTF-16. The column width calculation accounts for character count, though very wide CJK characters may appear slightly misaligned in monospaced fonts due to their double-width rendering.
Worked examples
| Example | Input | Result |
|---|---|---|
| Simple user list | JSON input: [{"id":1,"name":"Alice","role":"admin"},{"id":2,"name":"Bob","role":"user"},{"id":3,"name":"Charlie","role":"user"}] | Rows: 3; Columns: 3; Keys: id, name, role |
| Nested objects | JSON input: [{"product":"Laptop","price":999,"specs":{"ram":"16GB","disk":"512GB"}},{"product":"Phone","price":699,"specs":{"ram":"8GB","disk":"128GB"}}] | Rows: 2; Columns: 3; Keys: product, price, specs |
| Missing fields | JSON input: [{"a":1,"b":2},{"b":3,"c":4},{"a":5}] | Rows: 3; Columns: 3; Keys: a, b, c |
FAQ
What format does the input need to be?
The input must be a valid JSON array of objects, starting with [ and ending with ]. Each element inside should be a JSON object enclosed in curly braces.
Why do I get a parse error?
Common causes include trailing commas, single quotes instead of double quotes, unquoted keys or passing a bare object instead of wrapping it in an array.
How are nested objects displayed?
Nested objects and arrays are serialized into compact single-line JSON strings within their table cell so the tabular layout stays intact.
Does this handle large JSON files?
It works well for typical datasets viewed in a browser. Extremely large arrays with thousands of rows may take a moment to render but will not crash since parsing is synchronous.
Is my data sent to a server?
No. Parsing and formatting happen entirely in your browser using JavaScript. Nothing is uploaded anywhere.
Can I view a JSON array of primitives as a table?
The viewer expects an array of objects to build meaningful columns. An array of plain strings or numbers will return an error asking for objects.