Maison  >  Article  >  interface Web  >  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 ?

Linda Hamilton
Linda Hamiltonoriginal
2024-10-27 20:35:30892parcourir

How Can jQuery Simplify Converting JSON Data into HTML Tables?

L'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 de la table :

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 si les clés doivent être omises :

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 ) &amp;&amp; expected_keys[k] ) {
...
}

Ajoutez 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 l'injection -version gratuite 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);   
});

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn