"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como o jQuery pode simplificar a conversão de dados JSON em tabelas HTML?

Como o jQuery pode simplificar a conversão de dados JSON em tabelas HTML?

Publicado em 2024-11-09
Navegar:923

How Can jQuery Simplify Converting JSON Data into HTML Tables?

Abordagem simplificada do jQuery para conversão de tabela JSON em HTML

Converter matrizes JSON em tabelas HTML pode ser uma tarefa tediosa, mas jQuery simplifica o processo dramaticamente.

Para gerar uma tabela a partir de uma matriz JSON, use a função getJSON() para recuperar o data:

$.getJSON(url , function(data) {

Em seguida, crie o corpo da tabela:

var tbl_body = "";

Itere sobre as linhas e colunas da matriz JSON para criar as células da tabela:

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

Exclua campos específicos adicionando um objeto para verificar se as chaves serão omitidas:

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

Adicione a condição if para verificar as chaves a serem excluídas:

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

Anexar o corpo da tabela ao elemento HTML de destino:

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

Como alternativa, para maior segurança, use a versão sem injeção abaixo:

$.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);   
});
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3