Home > Article > Web Front-end > How to convert JSON data to html table using JavaScript/jQuery?

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

PHPzforward: 2023-09-10 08:13:151424browse

如何使用 JavaScript/jQuery 将 JSON 数据转换为 html 表？

JSON (JavaScript Object Notation) is a powerful data format used for exchanging data between servers and clients. HTML tables are powerful tools for representing data in a tabular format, making it very easy to read, analyze, and compare. In web development, it's common to convert JSON data into HTML tables.

In this article, we will learn how to convert JSON data into an HTML table using Javascript and jQuery. After reading this article, you will have a solid understanding of JSON to HTML table conversion.

Convert JSON data to HTML table using JavaScript

The following are the steps to create an HTML table using JSON data.

Create a function named "convert".
Create sample JSON data.
Use getElementByID("container") to get the container into which we will append the table.
Get the key of the first object of the JSON data so we can get the title of the table.
Loop through the column names, create a header cell, and set the column name to the text of the header cell.
Append header cells to header rows and then append header rows to headers
Append title to table
Loop through JSON data, create table rows, use Object.values(item) to get the value of the current object in the JSON data, and create table cells.
Set the value to the text of the table cell, append the table cell to the table row, and then append the table row to the table.

Example

In this example, we use Javascript to convert JSON data into an HTML table.

<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 to HTML table using jQuery

Here is the code to convert JSON data into an HTML table 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>

The above is the detailed content of How to convert JSON data to html table using JavaScript/jQuery?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript json jquery html Object 循环对象

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to validate email address using RegExp in JavaScript?Next article：How to validate email address using RegExp in JavaScript?

See more

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

Convert JSON data to HTML table using JavaScript

Example

Example: Convert JSON data to HTML table using jQuery

Related articles