JSFiddle - React, Tailwind, and code Playground
HTML
<select id="filters">
</select>
String filtro: <input type="text" id="query" />
<input type="button" id="filter" value="Filtrar" />
JavaScript
// Json
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"
}
];
debugger;
// Pega o nome das propriedades do primeiro objeto to array do json para montar a combo
var filters = Object.keys(json[0]);
// Pega referência da combo
var select = document.getElementById("filters");
// Monta a combo utilizando o nome das propriedades
for (var i = 0; i < filters.length; i++) {
// Cria elemento option com os valores da propriedade
var opt = document.createElement("option");
opt.text = filters[i];
opt.value = filters[i];
// Inclui elemento option no select
select.appendChild(opt);
}
// Pega referência do campo texto
var query = document.getElementById("query");
// Cria um evento de clique no botão Fitrar
document.getElementById("filter").onclick = function() {
// Busca no json com o método filter()
var result = json.filter(function(item) {
// Verifica se a propriedade(select.value) do item atual do json tem o mesmo valor do filtro digitado no campo texto(query.value)
return item[select.value] == query.value;
});
// Limpa o console e exibe os resultados
console.clear();
console.log(result);
};