Comment convertir les données JSON en une table HTML à l'aide de JavaScript / jQuery?

JSON est un format de fichier qui est principalement utilisé pour transférer les données / informations entre les serveurs et les applications Web. Javascrip et jquery Reportez-vous à l'implémentation du langage de programmation JavaScript. JQuery est une bibliothèque JavaScript riche en fonctionnalités qui exécute le code en moins de temps par rapport au code JavaScript complet.

JQuery interagit avec le DOM HTML pour manipuler les éléments HTML. Cet article fournit un guide procédural pour la conversion Json données à un Html Table à l'aide de JavaScript / jQuery.

Comment les données JSON se convertissent-elles en une table HTML?

Premièrement, de tous, un formulaire de document est créé avec Tag, dans lequel une table HTML est créée avec

étiqueter. Après cela, une bibliothèque JavaScript est importée pour utiliser les fonctionnalités intégrées de jquery. Enfin, les données JSON sont converties en table formatée dans le document HTML à l'aide de JavaScript / jQuery.

Pour pratiquer cette fonctionnalité, nous avons fourni un exemple détaillé ici.

Exemple

Pour une meilleure compréhension, l'exemple de code est divisé en quatre morceaux. Ces morceaux sont appelés section. Discutons-y:

Section 1: Créez une table et insérez le javascript / jQuery

Un exemple pour convertir les données JSON en table HTML à l'aide de jQuery

La description de ce morceau de code est donnée ci-dessous.

• Le htmlTable () La méthode est utilisée pour insérer la valeur du tableau en vérifiant la valeur d'index.
• La première pour boucle est utilisé pour se déplacer dans la séquence horizontale de la table.
• La deuxième pour boucle est utilisé comme une boucle imbriquée pour déplacer le contrôle verticalement.
• Après cela, le CV la variable est utilisée pour stocker la valeur de la colonne.
• De plus, si la valeur de CV est vide dans Données JSON, alors une cellule vide lui est allouée.
• Sinon, il convertit les données en un Table HTML en utilisant le Ajouter la propriété.

Sortir

La sortie renvoie l'exécution de toutes les sections de code ci-dessus dans une table HTML. Le Nom, Éducation, et Emplacement sont représentés dans l'en-tête. De plus, différentes valeurs pour ces en-têtes sont présentées dans le tableau.

Conclusion

Le Données JSON est converti en un Table HTML en employant Javascript / jQuery. jQuery possède des fonctionnalités de la bibliothèque JavaScript qui peuvent être intégrées dans n'importe quel fichier javascript. Dans cet article, vous avez appris à convertir le Données JSON à une table HTML Utilisation de JavaScript / jQuery. Les données JSON sont structurées de telle manière que les clés des données JSON sont converties en en-têtes de la table, et les valeurs des données JSON sont converties en entrées dans un tableau.