Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert JSON data to a html table using JavaScript/jQuery?
JSON (JavaScript Object Notation) is a powerful data format to exchange data between server and client. HTML tables are essential for displaying data in a structured, readable format. Converting JSON data to HTML tables is a common requirement in web development.
In this article, we will learn how to convert JSON data into HTML tables using both vanilla JavaScript and jQuery. We'll explore two practical approaches with complete examples.
Using Vanilla JavaScript
Here's how to create an HTML table from JSON data using pure JavaScript:
Step-by-Step Process
Parse the JSON data (if it's a string) or use the JavaScript object directly
Create table, thead, and tbody elements
Extract column headers from the first object's keys
Generate table header row with column names
Iterate through JSON data to create table rows
Append the completed table to the DOM
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
text-align: left;
}
table {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Convert JSON to HTML Table - JavaScript</h2>
<button onclick="convertJSON()">Generate Table</button>
<div id="tableContainer"></div>
<script>
function convertJSON() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: 20,
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow"
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Get container element
let container = document.getElementById("tableContainer");
container.innerHTML = ""; // Clear previous content
// Create table elements
let table = document.createElement("table");
let thead = document.createElement("thead");
let tbody = document.createElement("tbody");
// Get column headers from first object
let headers = Object.keys(jsonData[0]);
// Create header row
let headerRow = document.createElement("tr");
headers.forEach(header => {
let th = document.createElement("th");
th.textContent = header.toUpperCase();
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
// Create data rows
jsonData.forEach(rowData => {
let row = document.createElement("tr");
headers.forEach(header => {
let cell = document.createElement("td");
cell.textContent = rowData[header];
row.appendChild(cell);
});
tbody.appendChild(row);
});
// Assemble and append table
table.appendChild(thead);
table.appendChild(tbody);
container.appendChild(table);
}
</script>
</body>
</html>
Using jQuery
jQuery simplifies DOM manipulation with its concise syntax. Here's the same functionality using jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
text-align: left;
}
table {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Convert JSON to HTML Table - jQuery</h2>
<button id="generateBtn">Generate Table</button>
<div id="tableContainer"></div>
<script>
$(document).ready(function() {
$("#generateBtn").click(function() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: 20,
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow"
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Clear container and create table
let $container = $("#tableContainer").empty();
let $table = $("<table>");
let $thead = $("<thead>");
let $tbody = $("<tbody>");
// Get headers from first object
let headers = Object.keys(jsonData[0]);
// Create header row
let $headerRow = $("<tr>");
$.each(headers, function(index, header) {
$headerRow.append($("<th>").text(header.toUpperCase()));
});
$thead.append($headerRow);
// Create data rows
$.each(jsonData, function(index, rowData) {
let $row = $("<tr>");
$.each(headers, function(i, header) {
$row.append($("<td>").text(rowData[header]));
});
$tbody.append($row);
});
// Assemble and append table
$table.append($thead).append($tbody);
$container.append($table);
});
});
</script>
</body>
</html>
Comparison
| Aspect | Vanilla JavaScript | jQuery |
|---|---|---|
| File Size | No external dependencies | Requires jQuery library (~30KB) |
| Syntax | More verbose | Concise and readable |
| Performance | Faster (direct DOM manipulation) | Slightly slower (jQuery overhead) |
| Browser Support | Modern browsers | Excellent cross-browser support |
Key Points
Always check if JSON data exists and is valid before processing
Use
Object.keys()to extract column headers dynamicallyCreate proper table structure with
theadandtbodyelementsHandle empty arrays or missing properties gracefully in production code
Consider using CSS classes for better styling control
Conclusion
Both vanilla JavaScript and jQuery provide effective ways to convert JSON data into HTML tables. Choose vanilla JavaScript for better performance and no dependencies, or jQuery for simpler syntax and cross-browser compatibility.
61K+ Views
