How to insert items from a JSON file into an html table

Question

How to insert items from a JSON file into an html table

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have this JSON file:

var identificacao = [

{
    "nome": "João Silva",
    "cpf":  "444.111.777-00",
    "rg": "44.66.55.00-1",
    "nascimento": "28/06/1994",
    "endereco": [{
        "rua": "Av. Marechal Tito",
        "numero": 155,
        "bairro": "Jardim do Vale",
        "cep": "08108-145",
        "cidade": "São Paulo",
        "estado": "SP",
        },
    ],
    "contato":[{
    "telefone": "2222-2222",
    "celular": "92222-2222",
    "email": "[email protected]"
},
],

    "renda": "5.000",
    "foto": "joao_silva.jpg",
    "conta":[{
        "banco": "Bradesco",
        "agencia": "05",
        "numero_da_conta": "0102-1"
    },]
},

It contains 5 items, but in my html table the only one that appears is this first item.

In my javascript I used this code:

<script>
     $(function(){
             x = identificacao.length;
            for (var i = 0; i < x; i++) {
                
            var saida = "";
                
                 saida += "<tr>";
                 saida += "<td>" + identificacao[i].nome+ "</td>";
                        saida += "<td>" + identificacao[i].cpf + "</td>";
                        saida += "<td>" + identificacao[i].rg + "</td>";
                        saida += "<td>" + identificacao[i].nascimento + "</td>";
                
                 for(j=0; j< identificacao[i].endereco.length;j++){ 
                     
                        saida += "<td>" + identificacao[i].endereco[j].rua + "</td>";
                        saida += "<td>" + identificacao[i].endereco[j].numero + "</td>";
                        saida += "<td>" + identificacao[i].endereco[j].cep + "</td>";
                        saida += "<td>" + identificacao[i].endereco[j].bairro + "</td>";
                        saida += "<td>" + identificacao[i].endereco[j].cidade + "</td>";
                        saida += "<td>" + identificacao[i].endereco[j].estado + "</td>";
                 }
                
                 for(k=0; k< identificacao[i].contato.length;k++){
                     
                        saida += "<td>" + identificacao[i].contato[k].telefone + "</td>";
                        saida += "<td>" + identificacao[i].contato[k].celular + "</td>";
                        saida += "<td>" + identificacao[i].contato[k].email + "</td>";
                 }
               
                        saida += "<td>" + identificacao[i].renda + "</td>";
                        saida += "<td>" + identificacao[i].foto + "</td>";
                
                  for(n=0; n< identificacao[i].conta.length;n++){
                      
                        saida += "<td>" + identificacao[i].conta[n].banco + "</td>";
                        saida += "<td>" + identificacao[i].conta[n].agencia + "</td>";
                        saida += "<td>" + identificacao[i].conta[n].numero_da_conta + "</td>";
                }
                        
                       
                        saida += "</tr>";
                    
                    $("#tbody").append(saida);
                    $("#tabela").dataTable();
            }
        });
    </script>

I would like help finding out what error I'm making, and how can I get all of my items to appear in the table.

javascript html jquery json

asked by anonymous 06.12.2016 / 02:21

2 answers

How to concatenate html tag in php? [closed] Set cell font color in Office

score 1 · Answer 1

I had some problems using your JSON. I recommend using the jsonformatter website to format and validate your variable.

[
  {
    "nome":"João Silva",
    "cpf":"444.111.777-00",
    "rg":"44.66.55.00-1",
    "nascimento":"28/06/1994",
    "endereco":[
      {
        "rua":"Av. Marechal Tito",
        "numero":155,
        "bairro":"Jardim do Vale",
        "cep":"08108-145",
        "cidade":"São Paulo",
        "estado":"SP"
      }
    ],
    "contato":[
      {
        "telefone":"2222-2222",
        "celular":"92222-2222",
        "email":"[email protected]"
      }
    ],
    "renda":"5.000",
    "foto":"joao_silva.jpg",
    "conta":[
      {
        "banco":"Bradesco",
        "agencia":"05",
        "numero_da_conta":"0102-1"
      }
    ]
  }
]

My first choice will be to recommend jPut: link . You write a template and it can consume your JSON for this template.

My second recommendation will be this: link

It's a JS code that does what you want, but it has the problem that in the address, contact, and account fields, which are multivalued, it does not print very well. You would soon recommend handling your JSON or code.

Recommendations taken from stackoverflow itself, from the English question:

convert-json-data-to-html-table

score 0 · Answer 2

You can create a table template and render from JSON.

I particularly like Mustache: link . It's a very simple and fast plugin.

Basically, you would have this:

<script id="template" type="x-tmpl-mustache">
    <table>
        <tr>
            <td>{{Propriedade1}}</td>
            <td>{{Propriedade2}}</td>
            <td>{{Propriedade3}}</td>
            <td>{{Propriedade4}}</td>
        </tr>
    </table>
</script>

function renderTable() {
    // busca o template salvo na página
    var template = $('#template').html();

    // renderiza o template com o json
    var rendered = Mustache.render(template, json);

    // insere o HTML final dentro de um elemento
    $('#target').html(rendered);
}