"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment jQuery peut-il simplifier la conversion de données JSON en tableaux HTML ?

Comment jQuery peut-il simplifier la conversion de données JSON en tableaux HTML ?

Publié le 2024-11-09
Parcourir:963

How Can jQuery Simplify Converting JSON Data into HTML Tables?

Approche simplifiée de jQuery pour la conversion de tableaux JSON en HTML

La conversion de tableaux JSON en tableaux HTML peut être une tâche fastidieuse, mais jQuery simplifie le processus de façon spectaculaire.

Pour générer une table à partir d'un tableau JSON, utilisez la fonction getJSON() pour récupérer les données :

$.getJSON(url , function(data) {

Ensuite, créez le corps du tableau :

var tbl_body = "";

Parcourez les lignes et les colonnes du tableau JSON pour créer les cellules du tableau :

$.each(data, function() {
    var tbl_row = "";
    $.each(this, function(k , v) {
        tbl_row  = "<td>" v "</td>";
    });

Excluez des champs spécifiques en ajoutant un objet pour vérifier les clés à omettre :

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };

Ajoutez la condition if pour vérifier les clés à exclure :

if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}

Ajouter le corps du tableau à l'élément HTML cible :

$("#target_table_id tbody").html(tbl_body);

Alternativement, pour une sécurité améliorée, utilisez la version sans injection ci-dessous :

$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
    });            
    $("#target_table_id").append(tbl_body);   
});
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3