Comment puis-je convertir efficacement des tableaux JSON en tableaux HTML à l'aide de jQuery ?

Création de tableaux HTML à partir de tableaux JSON à l'aide de jQuery

Vous vous demandez quel est un moyen efficace de convertir des tableaux d'objets JSON en tableaux HTML dans jQuery ? Ne cherchez pas plus loin !

jQuery propose une solution pratique pour automatiser cette tâche, en excluant des champs spécifiques si vous le souhaitez.

Étapes pour convertir JSON en tableau HTML

1. Commencez par un tableau JSON contenant les données que vous souhaitez afficher.
2. Utilisez la méthode $.getJSON() pour récupérer les données JSON à partir d'une URL ou sous forme d'objet JavaScript.
3. Dans la fonction de rappel, créez une variable pour contenir le corps du tableau généré (tbl_body).
4. Parcourez chaque objet JSON du tableau.
5. Pour chaque objet, générez une ligne de tableau (tbl_row ) et parcourez ses champs.
6. À l'intérieur de la boucle interne, ajoutez des cellules HTML () pour chaque champ, en excluant celles que vous ne voulez pas dans le tableau.
7. Ajouter la ligne du tableau générée au corps du tableau.
8. Basculez entre une classe « impaire » ou « paire » pour chaque ligne afin de fournir une distinction visuelle.
9. Enfin, ajoutez le corps du tableau au tableau HTML cible. élément sur votre page en utilisant $("#target_table_id tbody").html(tbl_body).

Exclusion de champs spécifiques

Vous pouvez facilement exclure certains champs de la table générée en vérifiant si chaque clé de champ existe dans un objet contenant les clés attendues. Si la clé existe et est définie sur false, excluez le champ correspondant de la table.

Exemple de code

<code class="javascript">$.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});</code>

Cet exemple de code convertit les données du tableau JSON en un tableau, avec une alternance de classes de lignes « impaires » et « paires » pour une meilleure lisibilité. N'hésitez pas à le modifier et à le personnaliser davantage pour répondre à vos besoins spécifiques.

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!