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

Conversion sans effort de tableaux JSON en tableaux HTML à l'aide de jQuery

Face à la tâche de convertir un tableau d'objets JSON en tableau HTML, la complexité du processus peut être intimidant. Heureusement, jQuery simplifie considérablement ce processus.

Exploiter jQuery pour automatiser la création de tables

Le code jQuery fourni rationalise le processus de conversion en parcourant chaque objet JSON du tableau et en générant dynamiquement les lignes de table correspondantes. et cellules :

<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>

Exclusion de champs spécifiques (facultatif)

Pour exclure des champs spécifiques du tableau, créez simplement un objet avec leurs noms comme clés et valeurs vrai/faux pour indiquer l'inclusion ou exclusion :

<code class="javascript">var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };</code>

Ensuite, enveloppez la ligne tbl_row = avec la vérification suivante :

<code class="javascript">if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}</code>

Alternative sans injection

Pour une approche plus isolée, considérez ceci Solution basée sur DOM :

<code class="javascript">$.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
});</code>

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!