Comment convertir des tableaux JSON en tableaux HTML avec jQuery, y compris la possibilité d'exclure des champs spécifiques ?

Conversion de tableaux JSON en tableaux HTML avec jQuery

La transformation d'un tableau d'objets JSON en tableau HTML peut être réalisée efficacement à l'aide de jQuery.

Solution :

L'extrait de code jQuery fourni convertit un tableau d'objets JSON en un tableau HTML, à l'exclusion des champs spécifiques :

<pre class="brush:php;toolbar:false">
$.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);
});

Pour exclure clés spécifiques, ajoutez cette logique avant la ligne tbl_row = :

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}

Alternativement, une approche plus sécurisée et plus conviviale pour le DOM peut être utilisée :

<pre class="brush:php;toolbar:false">
$.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
});

Ces méthodes vous permettent de facilement convertissez les tableaux JSON en tableaux HTML, avec la possibilité d'exclure les champs indésirables.

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!