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 Fetch List Of Dictionary Json Data And Show It On HTML Page As Table Data?
The task we will complete in this article is to retrieve a list of dictionary JSON data and display it as table data on an HTML page. JSON (JavaScript Object Notation) is a lightweight data format that's commonly used for data exchange. Converting this data into HTML tables makes it readable and organized for users.
HTML Table
HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows, <th> for table headers, and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells, making them perfect for displaying structured JSON data.
Syntax
Following is the basic syntax for HTML table
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
Using jQuery to Convert JSON to Table
The most efficient way to convert JSON data to HTML tables is using jQuery. This approach dynamically creates table headers based on JSON keys and populates rows with corresponding values.
Example Dynamic Table Generation with Button Click
In the following example, we create a dynamic table from JSON data when the user clicks a button
<!DOCTYPE html>
<html>
<head>
<title>JSON to Table with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f9f9f9;">
<h2>JSON Data to HTML Table</h2>
<p id="jsonDisplay"></p>
<button onclick="makeTable('#dataTable')">Generate Table</button>
<table id="dataTable"></table>
<script>
var jsonData = [
{ "S.No": "1", "Name": "RajKumar", "Age": "25", "City": "Delhi" },
{ "S.No": "2", "Name": "Maya", "Age": "23", "City": "Mumbai" },
{ "S.No": "3", "Name": "John", "Age": "28", "City": "Bangalore" }
];
// Display JSON data initially
document.getElementById("jsonDisplay").innerHTML =
"<strong>JSON Data:</strong><br>" +
JSON.stringify(jsonData, null, 2).replace(/<br>/g, '<br>').replace(/ /g, ' ');
function makeTable(selector) {
$(selector).empty(); // Clear existing content
var columns = getColumns(jsonData, selector);
// Create data rows
for (var i = 0; i < jsonData.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var val = jsonData[i][columns[colIndex]];
if (val == null) val = "";
row.append($('<td/>').html(val));
}
$(selector).append(row);
}
}
function getColumns(data, selector) {
var columns = [];
var header = $('<tr/>');
for (var i = 0; i < data.length; i++) {
var row = data[i];
for (var key in row) {
if ($.inArray(key, columns) == -1) {
columns.push(key);
header.append($('<th/>').html(key));
}
}
}
$(selector).append(header);
return columns;
}
</script>
</body>
</html>
The output displays the JSON data initially, and when the user clicks the "Generate Table" button, it creates a formatted HTML table with proper headers and data rows.
Example Nested JSON Objects in Tables
This example demonstrates how to display nested JSON data using multiple tables
<!DOCTYPE html>
<html>
<head>
<title>Nested JSON to Tables</title>
<style>
table { border-collapse: collapse; margin: 10px; }
th, td { border: 1px solid #333; padding: 8px; }
th { background-color: #4CAF50; color: white; }
.container { display: flex; gap: 20px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Displaying Nested JSON Data As Table Data</h2>
<div id="tableContainer"></div>
<script>
var vehicles = {
"cars": [
{ "Name": "BMW", "Price": "6 Lakh", "Type": "Sedan" },
{ "Name": "Audi", "Price": "7 Lakh", "Type": "SUV" }
],
"bikes": [
{ "Name": "Honda", "Price": "80,000", "Type": "Sports" },
{ "Name": "Yamaha", "Price": "1.2 Lakh", "Type": "Cruiser" }
]
};
var container = document.getElementById("tableContainer");
container.innerHTML = "<div class='container'>";
// Create table for cars
createNestedTable("Cars", vehicles.cars, container);
// Create table for bikes
createNestedTable("Bikes", vehicles.bikes, container);
container.innerHTML += "</div>";
function createNestedTable(title, data, container) {
var tableHTML = "<div><h3>" + title + "</h3><table>";
// Create header
if (data.length > 0) {
tableHTML += "<tr>";
for (var key in data[0]) {
tableHTML += "<th>" + key + "</th>";
}
tableHTML += "</tr>";
// Create data rows
for (var i = 0; i < data.length; i++) {
tableHTML += "<tr>";
for (var key in data[i]) {
tableHTML += "<td>" + data[i][key] + "</td>";
}
tableHTML += "</tr>";
}
}
tableHTML += "</table></div>";
container.innerHTML += tableHTML;
}
</script>
</body>
</html>
This example creates separate tables for different categories within the JSON data, displaying cars and bikes in their respective tables with proper styling.
Example Automatic Table Generation on Page Load
This example automatically generates a table when the page loads, handling missing properties gracefully
<!DOCTYPE html>
<html>
<head>
<title>Auto-Generate Table from JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #007bff; color: white; }
tr:nth-child(even) { background-color: #f2f2f2; }
.empty-cell { color: #999; font-style: italic; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;" onload="createTable('#studentTable')">
<h2>Student Information Table</h2>
<table id="studentTable"></table>
<script>
var students = [
{ "Name": "Aditya", "Age": 22, "Grade": "A", "City": "Delhi" },
{ "Age": 24, "Hobby": "Singing", "Grade": "B" },
{ "Name": "Varsha", "Age": 21, "Hobby": "Dancing", "City": "Mumbai" },
{ "Name": "Rahul", "Grade": "A+", "City": "Chennai" }
];
function createTable(selector) {
var columns = getAllColumns(students, selector);
// Create data rows
for (var i = 0; i < students.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = students[i][columns[colIndex]];
if (cellValue == null || cellValue === undefined) {
row.append($('<td class="empty-cell"/>').html("N/A"));
} else {
row.append($('<td/>').html(cellValue));
}
}
$(selector).append(row);
}
}
function getAllColumns(data, selector) {
var columnSet = [];
var headerRow = $('<tr/>');
// Collect all unique keys
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
for (var key in rowData) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerRow.append($('<th/>').html(key));
}
}
}
$(selector).append(headerRow);
return columnSet;
}
</script>
</body>
</html>
This example demonstrates handling incomplete JSON data where some objects may have missing properties. Missing values are displayed as "N/A" with special styling.
1K+ Views
