Maison > Article > interface Web > Comment convertir des données JSON en tableau HTML à l'aide de JavaScript/jQuery ?

Comment convertir des données JSON en tableau HTML à l'aide de JavaScript/jQuery ?

PHPzavant: 2023-09-10 08:13:151447parcourir

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

JSON (JavaScript Object Notation) est un format de données puissant utilisé pour échanger des données entre les serveurs et les clients. Les tableaux HTML sont des outils puissants pour représenter les données sous forme de tableau, ce qui les rend très faciles à lire, à analyser et à comparer. Dans le développement Web, il est courant de convertir les données JSON en tableaux HTML.

Dans cet article, nous apprendrons comment convertir des données JSON en tableau HTML à l'aide de Javascript et jQuery. Après avoir lu cet article, vous aurez une solide compréhension de la conversion de tableaux JSON en HTML.

Convertir les données JSON en tableau HTML à l'aide de JavaScript

Voici les étapes pour créer un tableau HTML à l'aide de données JSON.

Créez une fonction appelée "convertir".
Créez des exemples de données JSON.
Utilisez getElementByID("container") pour obtenir le conteneur dans lequel nous ajouterons le tableau.
Récupérez la clé du premier objet des données JSON afin que nous puissions obtenir le titre du tableau.
Parcourez les noms de colonnes, créez des cellules d'en-tête et définissez les noms de colonnes sur le texte de la cellule d'en-tête.
Ajouter des cellules d'en-tête aux lignes d'en-tête, puis ajouter des lignes d'en-tête aux en-têtes
Ajouter le titre au tableau
Parcourez les données JSON, créez des lignes de tableau, utilisez Object.values(item) pour obtenir la valeur de l'objet actuel dans les données JSON et créez des cellules de tableau.
Définissez la valeur sur le texte de la cellule du tableau, ajoutez la cellule du tableau à la ligne du tableau, puis ajoutez la ligne du tableau au tableau.

Exemple

Dans cet exemple, nous utilisons Javascript pour convertir les données JSON en un tableau HTML.

<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>

Exemple : Convertir des données JSON en tableau HTML à l'aide de jQuery

Voici le code pour convertir les données JSON en tableau HTML à l'aide de 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript json jquery html Object 循环对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment valider une adresse e-mail à l'aide de RegExp en JavaScript ?Article suivant：Comment valider une adresse e-mail à l'aide de RegExp en JavaScript ?

Articles Liés

Voir plus