JSFiddle - React, Tailwind, and code Playground
HTML
<select>
<option value="id">id</option>
<option value="nome">nome</option>
<option value="console">console</option>
<option value="preco">preco</option>
</select>
<input type="text" />
<button>Pesquisar</button>
CSS
th, td {
padding: 5px;
border:1px solid black;
}
.esconder {
display: none;
}
JavaScript
var json = '[ { "id": "1", "nome": "Pedro", "console": "ps2", "preco": "200" }, { "id": "2", "nome": "Val", "console": "ps1", "preco": "50" }, { "id": "3", "nome": null, "console": "xbox", "preco": "2000" }, { "id": "4", "nome": "Flavio", "console": "one", "preco": "1000" }, { "id": "5", "nome": "Giovanna", "console": "xbox98", "preco": "300" }, { "id": "6", "nome": "Luana", "console": "xbox", "preco": "200" }, { "id": "7", "nome": "Pri", "console": "ps2", "preco": "100" } ]';
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');
});
});
//