1

Boa tarde... Preciso criar uma tabela em que as linhas e colunas sejam criadas dinamicamente. Por exemplo, considere esse JSON:

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

e o codigo JS

var table = '<div class=\'dataTables\'>';
         *      table += '<div class=\'table-responsive\'>';
         *      table += '<table id=\'tabela\' style=\'white-space: nowrap;\' cellspacing=\'0\' width=\'100%\' class=\'table table-hover table-striped table-bordered\'>';
         *      table += '<thead>';

                     //criar o cabecalho de acordo com o JSON

                table += '</thead>';
         *      table += '<tfoot><tr class=\'tr-foot\' id=\'tFoot\'></tr></tfoot>';
         *      table += '<tbody>';
         *          
         *          //criar as linhas de acordo com o json
         *          
         *      table += '</tbody>'
         *      table += '</table>';
         *      table += '</div>';
         *      table += '</div>';

Estou com mais dificuldade em criar as colunas, com os cabeçalhos das mesmas, pois não sei como ler esse json de forma a verificar a quantidade de coluna e pegar somente o "Header" para colocar na table.

obs: Nao quero deixar as colunas estáticas na tabela.

2
  • Esse json não tem virgulas entre os objs? Poste o json correto sff, a meu entender isso são 4 jsons diferentes
    – Miguel
    Commented 8/06/2016 às 7:13
  • Vamos lá, Alterei o json amigo Commented 8/06/2016 às 11:12

2 Respostas 2

2

você pode percorrer as chaves do json do primeiro registro para inserir o cabeçario, depois disto, basta inserir as linhas no tbody

var json = { "employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith", "age": 23 },
  {"firstName":"Peter", "lastName":"Jones", "gender": "male"}
]}

var tabela = document.getElementById("tabela");
var tbody = tabela.querySelector("tbody");
var thead = tabela.querySelector("thead");

var props = [];
json.employees.forEach(function (employer, indice) {
  for (var prop in employer) {
    if (props.indexOf(prop) == -1) {
      props.push(prop);
    }
  }
});

if (json.employees.length > 0) {
  var cabecario = document.createElement("tr");
  props.forEach(function (prop, indice) {
    var coluna = document.createElement("th");
    coluna.textContent = prop;
    cabecario.appendChild(coluna);
  });
  thead.appendChild(cabecario);

  json.employees.forEach(function (employer, indice) {
    var linha = document.createElement("tr");
    props.forEach(function (prop, indice) {
      var coluna = document.createElement("td");
      coluna.textContent = employer[prop];
      linha.appendChild(coluna);
    });
    tbody.appendChild(linha);
  });
}
<div class='dataTables'>
  <div class='table-responsive'>
    <table id='tabela' style='white-space: nowrap;' cellspacing='0' width='100%' class='table table-hover table-striped table-bordered'>
      <thead>
      </thead>
      <tfoot>
        <tr class='tr-foot' id='tFoot'></tr>
      </tfoot>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

EDIT

Realizei uma adaptação no codigo, agora ele será capaz de montar a tabela, mesmo que os objetos na lista "employees" naõ tenham a mesma estrutura.

4
  • Só pra tirar uma duvida, seu eu acrescentar no json por exemplo a coluna idade, essa coluna será criada automaticamente também na minha tabela ? Commented 8/06/2016 às 11:33
  • @JetersonMirandaGomes, a coluna será criada, porém todos os objetos dentro da lista employees devem possuir a mesma estrutura. caso o seu json omita valores nulos, então terá de fazer uma pequena adaptação. Commented 8/06/2016 às 11:48
  • @JetersonMirandaGomes, realizei uma alteração, acho que o algoritmo já está flexivel o suficiente. Commented 8/06/2016 às 11:58
  • Ah tah saquei, a minha classe que gera o json já está tratado isso, Ja me ajudou bastante, me poupou a criação de umas 10 tables dessa.... Commented 8/06/2016 às 12:00
0

Você pode também definir a sua tabela e preenche-la utilizando o data-* para verificar o nome do índice do json, eu particularmente gosto desta pratica por que é possível refinar a função de população de forma a colocar formatações,mascaras e outras funções que você deseje executar em uma coluna especifica.

var tabela = document.getElementById('minhaTabela');

var dados = [{
  nome: "Budwaiser",
  valor: 5.00
}, {
  nome: "Heineken",
  valor: 4.50
}, {
  nome: "Desperados",
  valor: 5.50
}];


function popularTabela(tabela, dados) {
  var nomes = [];
  var th = tabela.tHead.getElementsByTagName('th');

  for (var i = 0; i < th.length; i++) {
    nomes.push(th[i].getAttribute("data-nome"));
  }

  var tbody = "";
  for (var i in dados) {
    tbody += "<tr>" + td(dados[i]) + "</tr>";
  }

  function td(val) {
    var td = "";
    for (var i = 0; i < nomes.length; i++) {
      td += "<td>" + val[nomes[i]] + "</td>";
    }
    return td;
  }

  tabela.tBodies[0].innerHTML = tbody;
}

popularTabela(tabela, dados);
<table id="minhaTabela">
  <thead>
    <tr>
      <th data-nome="nome">Nome</th>
      <th data-nome="valor">Valor</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

No 1º for() eu pego todos os data-nome que serão as colunas a serem preenchidas é possível criar por exemplo data-tipo e colocar valores como "moeda", "data" e ai na função td você pode incluir um switch para realizar as funções necessárias.

No 2 e 3 for() eu preencho os dados conforme valores colunas do json.

Veja também com data-tipo em: jsfiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .