I have a code in this jsFiddle that I changed, but now I am having difficulty passing it to an HTML file .
My code:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
th, td {
padding: 5px;
border:1px solid black;
}
.esconder {
display: none;
}
</style>
<script type="text/javascript">
var executa = function() {
var json = ''[{"trechoorigem":"CGH","trechodestino":"CWB","dataprocessamento":null,"sobrenomepassageiro":"TESTE","statusintegracao":"PENDENTE","tipoproduto":"AEREO","datasaida":1440069600000,"dataconclusaovenda":1438345534000,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1113,"dataemissaovenda":1438354800000,"fornecedor":"JJ","idproduto":22078,"nomepassageiro":"PASSAGEIRO","idsolicitacao":21192,"datacriacaovenda":1438345245000,"localizador":"5RAHNZ","datachegada":1440073380000,"localizadorgds":"false","postoatendimento":"Atendimento Maringá"},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":"Teste","statusintegracao":"SUCESSO","tipoproduto":"HOTEL","datasaida":null,"dataconclusaovenda":1439450269000,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1112,"dataemissaovenda":null,"fornecedor":"470","idproduto":9467,"nomepassageiro":"Passageiro","idsolicitacao":21408,"datacriacaovenda":1439450082000,"localizador":"ADF123","datachegada":null,"localizadorgds":null,"postoatendimento":"Atendimento Maringá"},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"AEREO","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1114,"dataemissaovenda":null,"fornecedor":null,"idproduto":20626,"nomepassageiro":null,"idsolicitacao":1,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null},{"trechoorigem":"CGH","trechodestino":"SDU","dataprocessamento":null,"sobrenomepassageiro":"TESTE","statusintegracao":"SUCESSO","tipoproduto":"AEREO","datasaida":1445519400000,"dataconclusaovenda":1445240405000,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1115,"dataemissaovenda":1445263200000,"fornecedor":"G3","idproduto":22622,"nomepassageiro":"PASSAGEIRO","idsolicitacao":22100,"datacriacaovenda":1445240352000,"localizador":"FLKH4R","datachegada":1445522880000,"localizadorgds":"false","postoatendimento":"Atendimento Maringá"},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"HOTEL","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1116,"dataemissaovenda":null,"fornecedor":null,"idproduto":9652,"nomepassageiro":null,"idsolicitacao":21970,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"HOTEL","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1117,"dataemissaovenda":null,"fornecedor":null,"idproduto":9653,"nomepassageiro":null,"idsolicitacao":21971,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"AEREO","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1118,"dataemissaovenda":null,"fornecedor":null,"idproduto":22531,"nomepassageiro":null,"idsolicitacao":21893,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null}]';'
var data = JSON.parse(json);
console.log(data);
var campos = Object.keys(data[0]);
/* CRIAR HTML E JUNTAR O <TR> À ARRAY */
var table = document.createElement('table');
var tr = document.createElement('tr');
campos.forEach(function (titulo) {
var th = document.createElement('th');
th.innerHTML = titulo;
tr.appendChild(th);
});
table.appendChild(tr);
data.map(function (pessoa) {
var tr = document.createElement('tr');
Object.keys(pessoa).forEach(function (valor) {
var td = document.createElement('td');
td.innerHTML = pessoa[valor];
tr.appendChild(td);
});
table.appendChild(tr);
pessoa.DOM = tr;
return pessoa;
});
document.body.appendChild(table);
/* PARTE DE FILTRAGENS */
var select = document.querySelector('select');
var input = document.querySelector('input');
var button = document.querySelector('button');
button.addEventListener('click', function () {
var prop = select.value;
var val = input.value;
data.forEach(function (linha) {
var valor = linha[prop];
if (valor && linha[prop].indexOf(val) < 0) linha.DOM.classList.add('esconder');
else linha.DOM.classList.remove('esconder');
});
});
}
</script>
<body>
<form action="testeste.html" method="post">
<select>
<option value="trechoorigem">Trecho Origem</option>
<option value="trechodestino">Trecho Destino</option>
<option value="dataprocessamento">Data Processamento</option>
<option value="statusintegracao">Status Integração</option>
<option value="tipoproduto">Tipo Produto</option>
<option value="datasaida">Data Saida</option>
<option value="dataconclusaovenda">Conclusão Venda</option>
<option value="idpostoatendimento">ID P.Atendimento</option>
<option value="tipointegracao">Tipo Integração</option>
<option value="confirmacao">Confirmação</option>
<option value="idintegracao">ID Integração</option>
<option value="dataemissaovenda">Data Emissao Venda</option>
<option value="fornecedor">Fornecedor</option>
<option value="idproduto">ID Produto</option>
<option value="nomepassageiro">Nome Passageiro</option>
<option value="idsolicitacao">ID Solicitação</option>
<option value="datacriacaovenda">Data Criação Venda</option>
<option value="datachegada">Data Chegada</option>
<option value="localizadorgds">Localizador GDS</option>
<option value="postoatendimento">Posto de Atendimento</option>
</select>
<input type="text" />
<button onclick="executa()">Pesquisar</button>
</form>
</body>
</html>
Any tips?