merge-json-files.com

Free Online JSON to Table Converter

This tool takes a JSON array and renders it as a clean HTML table. Useful for generating HTML tables for documentation, emails, wikis, and web pages from API responses or data exports. Runs in the browser, free, no signup.

JSON to Table

Want to test drive the tool?

Download Sample JSON Files
Merge JSONJSON to ExcelFlatten JSONJSON to JSONL

Before & After Example

JSON Array Input
json
[
  { "id": 1, "name": "Alice", "dept": "Engineering", "salary": 85000 },
  { "id": 2, "name": "Bob", "dept": "Marketing", "salary": 65000 },
  { "id": 3, "name": "Carol", "dept": "Sales", "salary": 70000 }
]
Interactive HTML Table
text
┌────┬───────┬─────────────┬────────┐
│ id │ name  │ dept        │ salary │
├────┼───────┼─────────────┼────────┤
│ 1  │ Alice │ Engineering │ 85000  │
│ 2  │ Bob   │ Marketing   │ 65000  │
│ 3  │ Carol │ Sales       │ 70000  │
└────┴───────┴─────────────┴────────┘

✓ Sortable columns
✓ Search & filter
✓ Export to CSV/Excel

Frequently Asked Questions

Code Examples

How to Convert JSON to Table in Python

Converting JSON to table format in Python is best done with the pandas library using pd.json_normalize(). This function flattens nested JSON into a tabular DataFrame, automatically creating columns for each field. You can then export to CSV, Excel, or HTML tables with built-in pandas methods. Perfect for data analysis, creating reports, or displaying JSON data in spreadsheets. Handles nested objects and arrays intelligently by flattening them into separate columns.

Pythonjson_to_table.py
import json
import pandas as pd

# Load JSON data
with open('data.json', 'r') as f:
    data = json.load(f)

# Convert to DataFrame (table)
df = pd.DataFrame(data)

# Display as formatted table
print(df.to_string(index=False))

# Export to various formats
df.to_html('output.html', index=False, classes='table table-striped')
df.to_csv('output.csv', index=False)
df.to_excel('output.xlsx', index=False)

print(f"Converted {len(data)} records to table")

How to Convert JSON to Table in JavaScript

Converting JSON to HTML tables in JavaScript is straightforward by iterating through the JSON array and creating table elements dynamically. Use Object.keys() to extract headers and loop through rows to populate cells. Libraries like DataTables or AG Grid provide advanced features like sorting, filtering, and pagination. Ideal for web dashboards, admin panels, or displaying API data in user-friendly table format with interactive features.

JavaScriptjson-to-table.js
// Simple JSON to HTML table converter
function jsonToHtmlTable(jsonData) {
  if (!Array.isArray(jsonData) || jsonData.length === 0) {
    return '<p>No data</p>';
  }
  
  // Extract headers from first object
  const headers = Object.keys(jsonData[0]);
  
  let html = '<table class="table table-striped">\n';
  
  // Add header row
  html += '  <thead>\n    <tr>\n';
  headers.forEach(h => html += `      <th>${h}</th>\n`);
  html += '    </tr>\n  </thead>\n';
  
  // Add data rows
  html += '  <tbody>\n';
  jsonData.forEach(row => {
    html += '    <tr>\n';
    headers.forEach(h => {
      const val = row[h] || '';
      html += `      <td>${val}</td>\n`;
    });
    html += '    </tr>\n';
  });
  html += '  </tbody>\n</table>';
  
  return html;
}

// Usage
const data = [
  { name: 'Alice', age: 30, city: 'NYC' },
  { name: 'Bob', age: 25, city: 'LA' }
];

document.getElementById('output').innerHTML = jsonToHtmlTable(data);

Complete Guide

What the output actually looks like

Each object in the JSON array becomes one table row. Each key becomes a column header. If you have 10 objects in your JSON array, you get a table with 10 rows plus a header row.

Nested objects inside a field get stringified into that cell. For example, if you have {"user": {"name": "Ali", "email": "ali@example.com"}}, the entire nested object appears as a string in the "user" column. This is expected behavior. If you want those nested fields as separate columns, flatten the JSON first using the JSON Flattener tool.

Arrays inside fields also get stringified. If you have a "tags" field with ["javascript", "react", "nodejs"], it shows up as a comma-separated string in that cell. If you want one row per tag instead, you need to preprocess the JSON to expand the array into separate objects.

The output is a standard HTML <table> element with <thead> and <tbody>. Paste it directly into any HTML page, email template, or wiki. It works in Notion, Confluence, WordPress, and any other platform that accepts HTML.

Where you'd use this

API response to documentation: you took a raw API response from Postman or curl, converted it to a table, and pasted it into Notion or Confluence to show your team what the endpoint returns. Way easier than explaining JSON structure in text.

Email reports: HTML tables in emails are the standard format for structured data. If you're sending weekly metrics, user lists, or transaction summaries via email, converting JSON to an HTML table makes the data readable in any email client.

Internal dashboards: quickly rendering a data snapshot as a readable table without writing HTML by hand. You have JSON from a database query or API call, and you need to display it on an internal admin page. Convert to table, paste the HTML, done.

Developer handoffs: showing backend devs or PMs what a JSON payload looks like in table form. Instead of sending a wall of JSON in Slack, convert it to a table so people can actually scan the data and understand the structure at a glance.

Handling nested JSON and arrays inside fields

Nested objects like {"user": {"name": "Ali", "email": "ali@example.com"}} will render the nested object as a string in the table cell. You'll see something like [object Object] or the JSON stringified. This is the real problem users hit when converting JSON to tables.

To get proper columns for nested data, flatten the JSON first. Use the JSON Flattener tool to convert user.name and user.email into top-level keys. Then convert the flattened JSON to a table. You'll get separate columns for each nested field.

Arrays inside a field (like a "tags" field with multiple values) also become a string. If you have {"id": 1, "tags": ["javascript", "react"]}, the tags column shows the array as a string. If you want one row per tag, you need to preprocess the JSON to create separate objects for each tag value before converting to a table.

The tool doesn't automatically expand nested structures because there's no single correct way to do it. Different use cases need different handling. Flattening first gives you control over how nested data appears in the final table.