JSON to HTML Table
Transform a JSON array of objects into an interactive HTML data table with column sorting, text filtering, and dot-notation flattening for nested keys. Export the result to a real Excel spreadsheet.
JSON to HTML Table
Convert a JSON array of objects into a sortable, filterable HTML table. Export to Excel.
How to Use the JSON to HTML Table Converter
A product manager receives a JSON export of 200 customer records from the engineering team and needs to review the data without writing code or importing into a database. Paste the JSON array into the input area and click Render Table. The tool flattens nested objects using dot-notation column headers, renders every record as a table row, and enables sorting by clicking any column header. Filter the results by typing in the filter box to find specific customers, then click Copy Table to paste the visible rows into Excel for further analysis.
A developer debugging a REST API endpoint pastes the JSON array response into the tool and clicks Render Table. Sorting by columns like date or price reveals patterns or outliers immediately. The JSONPath query field lets you filter with expressions like $[*]?(@.status == "active") to isolate specific record subsets without writing SQL queries or opening a spreadsheet application.
An analyst working with JSON exports from a database views the data in a table, applies a text filter to isolate records matching specific criteria, and copies the filtered subset as tab-separated values into Excel. The tool handles arrays of varying schemas gracefully, rendering empty cells for missing fields and computing the column set as the union of all keys across all objects.
A business analyst who receives JSON data from engineering renders it as a table without needing coding skills or database access. The sortable columns and text filter make it easy to find specific records, compare values across rows, and gain insights independently. Click Export to Excel to download a TSV file that opens directly in any spreadsheet application.
A data engineer migrating data between databases pastes a sample of exported JSON records into the tool to visually verify the migration output. Sorting by primary key columns and filtering for specific records confirms that the data was exported correctly. The table view makes it easy to spot missing fields, incorrect values, or schema mismatches before loading into the target database.
How the JSON to HTML Table Converter Works
You paste a JSON array of objects and the tool renders each object as a table row. The first step is flattening: nested objects become flat columns using dot notation, so a property like address.city becomes its own column. This means deeply nested data fits neatly into a single table cell. Arrays are serialised as JSON strings in their cells.
Column Discovery and Sorting
The column set is the union of all keys across every object in the array. This means objects with different schemas still produce a complete table: if one object has a "phone" field that another lacks, the missing cells are left empty. Clicking any column header sorts the table by that column, using numeric comparison for numbers and locale-aware string comparison for text. Empty values are pushed to the bottom regardless of sort direction.
JSONPath Filtering
Before rendering, you can filter the data using a JSONPath expression. The evaluator supports dot access, bracket notation, array wildcards, recursive descent, and filter expressions with comparison operators. For example, $[*]?(@.age>25) returns only objects where the age field exceeds 25. The table updates dynamically as you type the expression, showing only the matching subset of rows.
Frequently Asked Questions
What JSON structure does the tool expect?
The input must be a JSON array of objects. Each object becomes a row and its keys become column headers. Nested objects are flattened using dot notation, so address.city becomes a column. Arrays of primitive values like [1, 2, 3] are not supported as top-level input β wrap them in an object first.
How do I paste the table into Excel?
Click Copy Table to copy all visible rows to your clipboard as tab-separated values. Then open Excel, select the top-left cell, and paste. Excel automatically splits the values into columns using the tab character as a delimiter. This works with Google Sheets, LibreOffice Calc, and Numbers as well.
What JSONPath expressions can I use to filter rows?
The tool supports dot access like $.users, array wildcards like $[*], recursive descent like $..name, and filter expressions like $[*]?(@.age>25). Filter operators include greater than, less than, equals, and not-equals, with both string and numeric comparison. The table updates as you type the expression.
What does the Export to Excel button actually download?
The export generates a tab-separated values file with a .tsv extension. This is a plain text format that Excel, Google Sheets, and LibreOffice Calc open natively with correct column alignment. For true binary .xlsx format with cell formatting and formulas, you would need a dedicated spreadsheet library like SheetJS.
What happens when different objects have different keys?
The column set is computed as the union of all keys across every object. If object A has a "phone" field that object B lacks, the table still shows a "phone" column β B just gets an empty cell in that column. This makes the tool tolerant of sparse or evolving data schemas, which is common when inspecting real-world API responses.