How to convert JSON data to a html table using JavaScript/jQuery?

Javascript Web Development Front End Technology

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>