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

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.

   
  
Convert JSON data into a html table using Javascript
 
Click the following button to convert JSON results into HTML table

  Click Here  
 
 Resulting Table: 
 
   

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.

    
  
Convert JSON data into a html table using Jquery
 
Click the following button to convert JSON results into HTML table
 
  Click Here  
 
 Resulting Table: 
 
   

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!