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 id="Convert-JSON-data-into-a-html-table-using-Javascript">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 id="Resulting-Table"> 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 id="Convert-JSON-data-into-a-html-table-using-Jquery">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 id="Resulting-Table"> 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!

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

This JavaScript library leverages the window.name property to manage session data without relying on cookies. It offers a robust solution for storing and retrieving session variables across browsers. The library provides three core methods: Session

This tutorial demonstrates creating dynamic page boxes loaded via AJAX, enabling instant refresh without full page reloads. It leverages jQuery and JavaScript. Think of it as a custom Facebook-style content box loader. Key Concepts: AJAX and jQuery


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

WebStorm Mac version
Useful JavaScript development tools

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
