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" />

<div id="tabela"></div>

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"
    }
];

// Criar combo
var filters = Object.keys(json[0]);
var select = document.getElementById("filters");

for (var i = 0; i < filters.length; i++) {
    var opt = document.createElement("option");
    opt.text = filters[i];
    opt.value = filters[i];
    
    select.appendChild(opt);
}

var query = document.getElementById("query");

document.getElementById("filter").onclick = function() {
    var result = json.filter(function(item) {
        return item[select.value] == query.value;
    });
    
    var html = "<table>";
    html+= "<tr><th>Id</th><th>Nome</th><th>Console</th><th>Preço</th></tr>";
    
    for (var i = 0; i < result.length; i++) {
        html+= "<tr><td>" + result[i].id + "</td><td>" + result[i].nome + "</td><td>" + result[i].console + "</td><td>" + result[i].preco + "</td></tr>";
    }
    
    $("#tabela").empty().append(html + "</table>");
};