How to convert JSON data to html table using JavaScript/jQuery?-JS Tutorial-php.cn

Table of Contents

Convert JSON data to HTML table using JavaScript

Example

Example: Convert JSON data to HTML table using jQuery

Home

Web Front-end

JS Tutorial

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

Sep 10, 2023 am 08:13 AM

如何使用 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.

&lt;html&gt;
&lt;head&gt;
   &lt;style&gt;
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse; 
      }
      td, th {
         padding: 10px;
      }
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Convert JSON data into a html table using Javascript&lt;/h2&gt;
   &lt;p&gt;Click the following button to convert JSON results into HTML table&lt;/p&gt;&lt;br&gt;
   &lt;button id="btn" onclick="convert( )"&gt; Click Here &lt;/button&gt; &lt;br&gt;
   &lt;h3&gt; Resulting Table: &lt;/h3&gt;
   &lt;div id="container"&gt;&lt;/div&gt;
   &lt;script&gt;
   
      // 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) =&gt; {
            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) =&gt; {
            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) =&gt; {
               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
      }
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Example: Convert JSON data to HTML table using jQuery

Here is the code to convert JSON data into an HTML table using jQuery.

&lt;html&gt;
&lt;head&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"&gt;&lt;/script&gt;
   &lt;style&gt;
      table, th, td { border: 1px solid black; border-collapse: collapse; }
      td, th {padding: 10px;}
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Convert JSON data into a html table using Jquery&lt;/h2&gt;
   &lt;p&gt;Click the following button to convert JSON results into HTML table&lt;/p&gt; &lt;br&gt;
   &lt;button id="btn" onclick="convert( )"&gt; Click Here &lt;/button&gt; &lt;br&gt;
   &lt;h3&gt; Resulting Table: &lt;/h3&gt; 
   &lt;div id="container"&gt;&lt;/div&gt;
   &lt;script&gt;
      
      // 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 = $("&lt;table&gt;");
         
         // 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 = $("&lt;thead&gt;");
         let tr = $("&lt;tr&gt;");
         
         // Loop through the column names and create header cells
         $.each(cols, function(i, item){
            let th = $("&lt;th&gt;");
            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 = $("&lt;tr&gt;");
            
            // 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) =&gt; {
               let td = $("&lt;td&gt;");
               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
      }
   &lt;/script&gt; 
 &lt;/body&gt;
&lt;/html&gt;

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn