Converting JSON to an HTML table is a common task when displaying structured data in a readable and interactive format on a webpage. You can easily achieve this using JavaScript. Here's how you can do it:
Example JSON:
json
[
{
"Name": "John",
"Age": 28,
"Country": "USA"
},
{
"Name": "Jane",
"Age": 22,
"Country": "Canada"
},
{
"Name": "Tom",
"Age": 30,
"Country": "UK"
}
]
Converted HTML Table Output:
html
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>28</td>
<td>USA</td>
</tr>
<tr>
<td>Jane</td>
<td>22</td>
<td>Canada</td>
</tr>
<tr>
<td>Tom</td>
<td>30</td>
<td>UK</td>
</tr>
</table>
How to Convert JSON to HTML Table
1. Using JavaScript (For Web Use)
You can easily convert JSON to an HTML table using JavaScript. Below is an example that demonstrates how to do this.
JavaScript Code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to HTML Table</title>
</head>
<body>
<h2>JSON to HTML Table</h2>
<div id="table-container"></div>
<script>
const jsonData = [
{
"Name": "John",
"Age": 28,
"Country": "USA"
},
{
"Name": "Jane",
"Age": 22,
"Country": "Canada"
},
{
"Name": "Tom",
"Age": 30,
"Country": "UK"
}
];
function generateTable(jsonData) {
let table = '<table border="1"><tr>';
// Get the headers (keys of the first object)
const headers = Object.keys(jsonData[0]);
// Add header row
headers.forEach(header => {
table += `<th>${header}</th>`;
});
table += '</tr>';
// Add data rows
jsonData.forEach(item => {
table += '<tr>';
headers.forEach(header => {
table += `<td>${item[header]}</td>`;
});
table += '</tr>';
});
table += '</table>';
return table;
}
// Insert the generated table into the page
document.getElementById("table-container").innerHTML = generateTable(jsonData);
</script>
</body>
</html>
Explanation:
JSON Data: The jsonData array holds the JSON objects.
generateTable() Function: This function:
Creates an HTML table structure.
Extracts the keys from the first JSON object as column headers.
Loops through each JSON object and adds a row for each entry.
The table is dynamically generated and inserted into a div with the id="table-container".
Steps:
Copy and paste the code into an HTML file.
Open the file in your web browser.
The JSON data will be displayed in an HTML table.
2. Using Python (For Server-Side or Automated Conversion)
If you need to generate an HTML table from JSON on the server-side or automate the process, you can use Python to convert JSON data into an HTML table.
Python Script:
python
import json
# Sample JSON data
json_data = [
{"Name": "John", "Age": 28, "Country": "USA"},
{"Name": "Jane", "Age": 22, "Country": "Canada"},
{"Name": "Tom", "Age": 30, "Country": "UK"}
]
# Start the HTML table
html_table = '<table border="1"><tr>'
# Add the headers (keys from the first JSON object)
headers = json_data[0].keys()
for header in headers:
html_table += f'<th>{header}</th>'
html_table += '</tr>'
# Add the data rows
for item in json_data:
html_table += '<tr>'
for header in headers:
html_table += f'<td>{item[header]}</td>'
html_table += '</tr>'
html_table += '</table>'
# Save or display the HTML table
with open("output.html", "w") as file:
file.write(html_table)
print("HTML table has been generated and saved to 'output.html'")
Explanation:
JSON Data: The json_data variable contains the JSON array.
HTML Table Generation: The script constructs an HTML table by first extracting the keys from the first JSON object to use as column headers.
The table is written to an HTML file (output.html).
Steps:
Save the script to a .py file.
Run the script with Python installed.
The HTML table will be saved to output.html, which you can open in any web browser.
3. Using Online Tools
If you don't want to write code, you can use online tools to convert JSON to an HTML table:
JSON Formatter & Validator:
Paste your JSON data into the tool.
It will generate a table that you can copy or download as HTML.
ConvertJSON:
Paste your JSON data into the input box.
The tool will generate an HTML table with your JSON data.
4. Manually Writing the HTML Table from JSON
For small JSON datasets, you can manually create an HTML table by following this structure:
JSON:
json
[
{"Name": "John", "Age": 28, "Country": "USA"},
{"Name": "Jane", "Age": 22, "Country": "Canada"}
]
Manually Written HTML Table:
html
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>28</td>
<td>USA</td>
</tr>
<tr>
<td>Jane</td>
<td>22</td>
<td>Canada</td>
</tr>
</table>
Summary of Methods:
JavaScript: Use JavaScript to dynamically generate HTML tables in the browser. Great for client-side rendering.
Python: Use Python to convert JSON to HTML for server-side or bulk processing, ideal for automating this task.
Online Tools: Websites like JSON Formatter & Validator and ConvertJSON allow you to convert JSON to an HTML table without writing code.
Manual Writing: For small JSON datasets, you can manually write the HTML table by extracting keys and values from the JSON.