JSON data can be displayed in a structured HTML table by dynamically creating table headers and rows from object properties. JavaScript and jQuery can both be used to generate the table.
Note: JSON.stringify() is not responsible for converting JSON data into an HTML table. It only converts a JavaScript value into a JSON string. The second approach below uses JavaScript DOM methods to create the table.
[Approach 1]: Using jQuery and a for Loop
In this approach, jQuery is used to create and append table rows and cells.
- Store the data as an array of objects.
- Find all unique property names to create the table headers.
- Loop through each object and create a table row.
- Add the corresponding values to each cell.
- Leave a cell empty when an object does not contain a particular property.
Example: Converts an array of objects into an HTML table using jQuery and for loops.
<!DOCTYPE html>
<html>
<head>
<title>
Convert JSON Data to an HTML Table
</title>
<script src=
"https://code.jquery.com/jquery-3.7.1.min.js">
</script>
</head>
<body>
<h2>
Convert JSON Data to an HTML Table
</h2>
<button onclick="constructTable('#table')">
Create Table
</button>
<br><br>
<table id="table" border="1">
</table>
<script>
const list = [
{
col_1: "val_11",
col_3: "val_13"
},
{
col_2: "val_22",
col_3: "val_23"
},
{
col_1: "val_31",
col_3: "val_33"
}
];
function constructTable(selector) {
// Remove existing table content
$(selector).empty();
// Get all unique column names
const columns = [];
list.forEach(row => {
for (const key in row) {
if (!columns.includes(key)) {
columns.push(key);
}
}
});
// Create the table header
const header = $("<tr>");
columns.forEach(column => {
header.append(
$("<th>").text(column)
);
});
$(selector).append(header);
// Create table rows
list.forEach(item => {
const row = $("<tr>");
columns.forEach(column => {
const value =
item[column] ?? "";
row.append(
$("<td>").text(value)
);
});
$(selector).append(row);
});
}
</script>
</body>
</html>
Output:Â
[Approach 2]: Using JavaScript DOM Methods
In this approach, JavaScript's built-in DOM methods are used to create the table without jQuery.
- Store the data as an array of objects.
- Collect all unique object keys.
- Create the table headers using <th> elements.
- Create rows using insertRow().
- Add values using insertCell().
Example: Dynamically creates an HTML table using JavaScript DOM methods.Â
<!DOCTYPE html>
<html>
<head>
<title>
Convert JSON Data to an HTML Table
</title>
</head>
<body>
<h2>
Convert JSON Data to an HTML Table
</h2>
<button onclick="createTable()">
Create Table
</button>
<br><br>
<div id="tableContainer"></div>
<script>
const list = [
{
name: "John",
age: 25,
city: "New York"
},
{
name: "Emma",
age: 28,
city: "London"
},
{
name: "David",
age: 30,
city: "Sydney"
}
];
function createTable() {
// Get column names
const columns = Object.keys(list[0]);
// Create table
const table =
document.createElement("table");
table.border = "1";
// Create header row
const headerRow =
table.insertRow();
columns.forEach(column => {
const th =
document.createElement("th");
th.textContent = column;
headerRow.appendChild(th);
});
// Create data rows
list.forEach(item => {
const row = table.insertRow();
columns.forEach(column => {
const cell = row.insertCell();
cell.textContent =
item[column] ?? "";
});
});
// Display the table
const container =
document.getElementById(
"tableContainer"
);
container.innerHTML = "";
container.appendChild(table);
}
</script>
</body>
</html>
Output:Â
