JSFiddle - React, Tailwind, and code Playground

by Marllon Nasser

HTML

Faixa Etaria:
<select id="FaixaEtaria">
<option></option>
<option>0-17</option>
<option>18-25</option>
<option>26-35</option>
<option>36 ou mais</option>
</select>
<br/>
<br/> Sexo: &nbsp;
<select id="Sexo">
<option></option>
<option>Masc</option>
<option>Fem</option>
</select>

<br/>
<br/> Recurso a arma:
<select id="RecursoArma">
<option></option>
<option>Sim</option>
<option>Não</option>
</select>

<br/>
<br/>
<button id="btnBuscar">
Filtrar</button>

JavaScript

//Minifiquei o json
var json = [{
  "Id": 1,
  "Nome": "Lucia Rodrigues",
  "Idade": 48,
  "Localidade": "Lagoa",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Fem",
  "RecursoArma": "Sim"
}, {
  "Id": 2,
  "Nome": "Nome Desconhecido",
  "Idade": 46,
  "Localidade": "Ilha Terceira",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Fem",
  "RecursoArma": "Não"
}, {
  "Id": 3,
  "Nome": "Vera Silva",
  "Idade": 30,
  "Localidade": "Almada",
  "Faixa Etaria": "26-35",
  "Faixa": "faixaC",
  "Sexo": "Fem",
  "RecursoArma": "Não"
}, {
  "Id": 4,
  "Nome": "Maria Eufrázia",
  "Idade": 83,
  "Localidade": "Terena",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Fem",
  "RecursoArma": "Sim"
}, {
  "Id": 5,
  "Nome": "Luzia Rosado",
  "Idade": 80,
  "Localidade": "Terena",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Fem",
  "RecursoArma": "Sim"
}, {
  "Id": 6,
  "Nome": "Fernanda",
  "Idade": 70,
  "Localidade": "Oeiras",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Fem",
  "RecursoArma": "Sim"
}, {
  "Id": 7,
  "Nome": "Nome Desconhecido",
  "Idade": 48,
  "Localidade": "Ilha Terceira",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Fem",
  "RecursoArma": "Não"
}, {
  "Id": 8,
  "Nome": "Marina Mendes",
  "Idade": 25,
  "Localidade": "Moimenta da Beira",
  "Faixa Etaria": "18-25",
  "Faixa": "faixaB",
  "Sexo": "Fem",
  "RecursoArma": "Sim"
}, {
  "Id": 9,
  "Nome": "Helena Cabrita",
  "Idade": 60,
  "Localidade": "Cruz de Pau",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Fem",
  "RecursoArma": "Sim"
}, {
  "Id": 10,
  "Nome": "Lana",
  "Idade": 2,
  "Localidade": "Cruz de Pau",
  "Faixa Etaria": "0-17",
  "Faixa": "faixaA",
  "Sexo": "Fem",
  "RecursoArma": "Sim"
}, {
  "Id": 11,
  "Nome": "Fernando Cruz",
  "Idade": 60,
  "Localidade": "Porto",
  "Faixa Etaria": "36 ou mais",
  "Faixa": "faixaD",
  "Sexo": "Masc",
  "RecursoArma": "Não"
}, {
 ...