Javascript - Como montar tabela de forma dinâmica apatir de um json

3 de junho de 2020 2 respostas Resolvido

Cleiton_Conceicao 3 de junho de 2020

galera, o json é criado de forma dinâmica. mas a ideia é o seguinte…

O json que irei receber é seguindo essa estrutura.

{
   "ano":"2015",
   "anoModelo":"2015",
   "chassi":"*****70199",
   "codigoRetorno":"0",
   "codigoSituacao":"0",
   "uf":"BA",
   "instituicoes":[
      {
         "id":"1",
         "instituicao":"MASTER - CLEITON",
         "preco":"10"
      },
      {
         "id":"2",
         "instituicao":"POOL SALVADOR",
         "preco":"120"
      },
      {
         "id":"5",
         "instituicao":"TESE 3",
         "preco":"70"
      }
   ]
}

eu fiz isso passando uma variável para o json porém não está funcionando.

for(var i = 0, l = options.length; i < l; i++){

            var option = options[i];

            alert(i);

            console.log(option);

            rows += "<tr>";

            rows += " <td>" + option.instituicoes.id + "</td>";

            rows += " <td>" + options.anoModelo + "</td>";

            rows += " <td>" + options.chassi + "</td>";

           

            rows += "</tr>";

            alert(rows);

            tabela.find("tbody").html(rows);

          }

alguém consegue me dar uma força?

2 Respostas

Solucao aceita

Lucas_Camara 3 de jun. de 2020 1 like

Esse é um código que montei há muito tempo atrás. Usa JS puro.

<html>

<head>
	<title>Criando linhas dinamicamente em tabelas</title>
</head>

<body>
	<table id='tabela' border='2' width='100%'></table>
	
	<script LANGUAGE="JavaScript">
		var config = {
			values: [{
				nome: 'Aaa',
				sobrenome: 'Aaa',
				telefone: '([telefone removido]',
				cidade: 'Blabla'
			}, {
				nome: 'Bbb',
				sobrenome: 'Bbb',
				telefone: '([telefone removido]',
				cidade: 'Blabla'
			}, {
				nome: 'Ccc',
				sobrenome: 'Ccc',
				telefone: '([telefone removido]',
				cidade: 'Blabla'
			}, {
				nome: 'Ddd',
				sobrenome: 'Ddd',
				telefone: '([telefone removido]',
				cidade: 'Blabla'
			}],
			headers:[
				{key: 'nome', name: 'Nome', style: 'width:40%'},
				{key: 'sobrenome', name: 'Sobrenome', style: 'width:30%'},
				{key: 'telefone', name: 'Telefone', style: 'width:15%'},
				{key: 'cidade', name: 'Cidade', style: 'width:15%'}
			]
		};
		
		function populateTable(c, config) {
			var values = config.values;
			var headers = config.headers;
			
			/* Limpa a tabela para adicionar novas informações */
			while(c.rows.length - 1 > 0) {
				c.deleteRow(1);
			}
			
			/* Define variáveis para criação das linhas e colunas */
			var row; var col;
			
			// Linhas
			for(var i = 0; i < values.length; i++) {
				var lastRow = c.rows.length;
				var iteration = lastRow;
				row = c.insertRow(lastRow);
				
				// Colunas
				for(var j = 0; j < headers.length; j++) {
					col = row.insertCell(j);
					col.style = headers[j].style;
					col.appendChild(document.createTextNode(values[i][headers[j].key]));
				}
			}
		}
		
		var tabela = document.getElementById("tabela")
		populateTable(tabela, config);
	</script>
</body>

</html>

Cleiton_Conceicao 3 de jun. de 2020

Obrigado man! Ajudou muito!

Criado 3 de junho de 2020

Ultima resposta 3 de jun. de 2020

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados