How to filter data from a JSON with JS?

Once you create the table from this JSON it is best to cache these elements of the DOM ( <tr> ) and associate them with your initial object so you can work with them later.

In other words, if you attach to each of these objects a property, for example DOM , you can then (without effort for the Browser) go get the element you want and hide it if the filter does not apply to it.

An example would be:

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;
});

So you can then filter only JSON without going to the DOM, which is much more efficient. Then you can use CSS classes to hide what you do not want:

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');
    });
});

Example: link

I made a simple code in pure JS based on your form. It's quite simple, I'd have to improve:

Being json the variable with json of your data, select the combo where values are the name of the columns (properties in the case) contained in json and query the text of your form. Access the demo below to understand.

The code of the button that filters ( "Search" in your case) the data:

document.getElementById("filter").onclick = function() {
    var result = json.filter(function(item) {
        return item[select.value] == query.value;
    });
};

Fiddle

The idea is to use Array.filter() javascript.

Other examples with the string filter being contains , #

Demo updated with json posted.

Demo updated with table generation.