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