Comment puis-je convertir des données JSON en tableau HTML à l'aide de jQuery, tout en excluant des champs spécifiques et en évitant les vulnérabilités d'injection ?

Conversion sans effort de JSON en tableau HTML avec jQuery

Convertir un tableau d'objets JSON en un tableau HTML peut être une tâche ardue, surtout lorsque certains champs doivent être exclus. Cependant, jQuery fournit une solution élégante et simple à ce défi.

Utilisation de la méthode getJSON() de jQuery

La méthode getJSON() récupère de manière asynchrone les données JSON à partir d'une URL spécifiée. et exécute une fonction de rappel lors de sa récupération réussie. Dans la fonction de rappel, chaque objet JSON du tableau est itéré et chaque champ est converti en cellule de tableau HTML.

Création de la structure du tableau

Ce qui suit l'extrait de code montre comment utiliser getJSON() pour générer un tableau HTML :

$.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);
});

Dans ce code, le sélecteur $("#target_table_id tbody") localise l'élément de corps de table avec l'ID spécifié et le remplit avec le HTML généré dynamiquement.

Exclusion de champs spécifiques

Pour exclure certains champs du tableau, vous pouvez définir un objet qui stocke les clés des champs que vous souhaitez inclure. Dans la fonction de rappel getJSON(), vérifiez si la clé du champ existe dans cet objet et incluez-la dans la ligne du tableau uniquement si sa valeur est vraie.

Alternative sans injection

Pour éviter d'éventuelles vulnérabilités d'injection, envisagez d'utiliser l'alternative sans injection suivante :

$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
        odd_even = !odd_even;               
    });
    $("#target_table_id").append(tbl_body);   //DOM table doesn't have .appendChild
});

Ce code utilise directement les méthodes insertRow() et insertCell() au lieu de s'appuyer sur des chaînes HTML, garantissant ainsi une plus grande mise en œuvre sécurisée.

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!