Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Convert JSON Data to HTML Table Using JavaScript and jQuery
JSON (JavaScript object notation) is a powerful data format to exchange data from server to client and vice versa. HTML tables are powerful tools to represent data in tabular format so that it becomes very easy to read, analyze and compare. It is very common in web development to convert JSON data into HTML tables.
In this article, we will learn how to convert JSON data into HTML tables using Javascript as well as jQuery. By the end of this article, you will have a solid understanding of JSON to HTML table conversion.
Convert JSON data into HTML tables using JavaScript
Here are the following steps to create HTML tables using JSON data.
Create a function named "convert".
Create a sample JSON data.
Get the container using getElementByID("container") where we will append the table.
Get the keys of the first object of the JSON data so that we get the headings of the table.
Loop through the column names, create header cells, and set the column name as the text of the header cell.
Append the header cells to the header row and then append the header row to the header
Append the header to the table
Loop through the JSON data, create table rows, get the values of the current object in the JSON data using Object.values(item), and create table cells.
Set the value as the text of the table cell, append the table cells to the table row, and then append the table row to the table.
Example
In this example, we are converting JSON data into HTML tables using Javascript.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
}
</style>
</head>
<body>
<h2>Convert JSON data into a html table using Javascript</h2>
<p>Click the following button to convert JSON results into HTML table</p><br>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>
<script>
// Function to convert JSON data to HTML table
function convert() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: "20",
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow",
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Get the container element where the table will be inserted
let container = document.getElementById("container");
// Create the table element
let table = document.createElement("table");
// Get the keys (column names) of the first object in the JSON data
let cols = Object.keys(jsonData[0]);
// Create the header element
let thead = document.createElement("thead");
let tr = document.createElement("tr");
// Loop through the column names and create header cells
cols.forEach((item) => {
let th = document.createElement("th");
th.innerText = item; // Set the column name as the text of the header cell
tr.appendChild(th); // Append the header cell to the header row
});
thead.appendChild(tr); // Append the header row to the header
table.append(tr) // Append the header to the table
// Loop through the JSON data and create table rows
jsonData.forEach((item) => {
let tr = document.createElement("tr");
// Get the values of the current object in the JSON data
let vals = Object.values(item);
// Loop through the values and create table cells
vals.forEach((elem) => {
let td = document.createElement("td");
td.innerText = elem; // Set the value as the text of the table cell
tr.appendChild(td); // Append the table cell to the table row
});
table.appendChild(tr); // Append the table row to the table
});
container.appendChild(table) // Append the table to the container element
}
</script>
</body>
</html>
Example: Convert JSON data into HTML tables using jQuery
Here is the code to convert Convert JSON data into HTML tables using jQuery.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; }
td, th {padding: 10px;}
</style>
</head>
<body>
<h2>Convert JSON data into a html table using Jquery</h2>
<p>Click the following button to convert JSON results into HTML table</p> <br>
<button id="btn" onclick="convert( )"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>
<script>
// Function to convert JSON data to HTML table
function convert() {
// Sample JSON data
let jsonData = [
{
name: "Saurabh",
age: "20",
city: "Prayagraj"
},
{
name: "Vipin",
age: 23,
city: "Lucknow",
},
{
name: "Saksham",
age: 21,
city: "Noida"
}
];
// Get the container element where the table will be inserted
let container = $("#container");
// Create the table element
let table = $("<table>");
// Get the keys (column names) of the first object in the JSON data
let cols = Object.keys(jsonData[0]);
// Create the header element
let thead = $("<thead>");
let tr = $("<tr>");
// Loop through the column names and create header cells
$.each(cols, function(i, item){
let th = $("<th>");
th.text(item); // Set the column name as the text of the header cell
tr.append(th); // Append the header cell to the header row
});
thead.append(tr); // Append the header row to the header
table.append(tr) // Append the header to the table
// Loop through the JSON data and create table rows
$.each(jsonData, function(i, item){
let tr = $("<tr>");
// Get the values of the current object in the JSON data
let vals = Object.values(item);
// Loop through the values and create table cells
$.each(vals, (i, elem) => {
let td = $("<td>");
td.text(elem); // Set the value as the text of the table cell
tr.append(td); // Append the table cell to the table row
});
table.append(tr); // Append the table row to the table
});
container.append(table) // Append the table to the container element
}
</script>
</body>
</html>
60K+ Views
