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

Question

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"
    },]
},

which 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 to know what mistake I am making, and how can I make all my items appear on the table.

Answer 1

I had some problems using your JSON. I recommend using the jsonformatter site 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 option will be to recommend jPut: https://github.com/shabeer-ali-m/jput. You write a template and it can consume your JSON for this template.

My second recommendation will be this: http://jsfiddle.net/7MRx6/338/

It is a code in JS that does what you want, but has the problem of in the fields address, contact and account, which are multivariate, it does not print very well. Soon recommend to treat your JSON or code.

Recommendations taken from the stackoverflow itself, from the English question:

Convert-json-data-to-a-html-table

Answer 2

You can create a table template and render from JSON.

I particularly like the Mustache very much: https://github.com/janl/mustache.js/. It is a very simple and fast plugin.

Basically, you’d have that:

<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);
}