How to better filter results

Asked

Viewed 36 times

-1

After creating json arrays I am having trouble getting a common result of different id’s. Because when I activate the filter of the last function select , the others selects stop working.

<select id="myselect" class="classa" onchange="change_myselect(this.value)">
            
            <option value="">Faixa etária</option>
            <option class="opcoes" value="faixaA">0 a 17 anos</option>
            <option class="opcoes" value="faixaB">18 a 25 anos</option>
            <option class="opcoes" value="faixaC">26 a 35 anos</option>
            <option class="opcoes" value="faixaD">36 ou mais</option>
            <option class="opcoes" value="faixaE">Desconhecido</option>
        </select>

        <br> <br>

        <select id="myselect2" class="classb" onchange="change_myselect(this.value)">
            <option class="opcoes" value="">Sexo:</option>
            <option class="opcoes" value="faixaF">Masculino</option>
            <option class="opcoes" value="faixaG">Feminino</option>
            <option class="opcoes" value="faixaH">Desconhecido</option>
        </select>

        <br> <br>
        
        <select id="myselect3" class="classc" onchange="change_myselect(this.value)">

            <option class="opcoes" value="">Recurso a arma:</option>
            <option class="opcoes" value="faixaI">Sim</option>
            <option class="opcoes" value="faixaJ">Não</option>
            <option class="opcoes" value="faixaK">Desconhecido</option>
        </select>  

Filters were created through the function if in order to restrict the results that would be written in the "new Array"

function change_myselect(value) {

           $.getJSON("dados.json", function(json) {
           
                var arrayFaixaA = new Array();
                var arrayFaixaB = new Array();
                var arrayFaixaC = new Array();
                var arrayFaixaD = new Array();
                var arrayFaixaE = new Array();
                var arrayFaixaF = new Array();
                var arrayFaixaG = new Array();
                var arrayFaixaH = new Array();
                var arrayFaixaI = new Array();
                var arrayFaixaJ = new Array();
                var arrayFaixaK = new Array();

In order to read all the json code we use for.

for(var i = 0; i < json.length; i++) {

Then we used a if to search and write people’s data within an array.

                    if(json[i].Faixa == "faixaA"){
                        arrayFaixaA.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].Faixa == "faixaB"){
                        arrayFaixaB.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].Faixa == "faixaC"){
                        arrayFaixaC.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].Faixa == "faixaD"){
                        arrayFaixaD.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].Faixa == "faixaE"){
                        arrayFaixaE.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].sexo == "Masc"){
                        arrayFaixaF.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].sexo == "Fem"){
                        arrayFaixaG.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].sexo == "Desconhecido"){
                        arrayFaixaH.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].RecursoArma == "Sim"){
                        arrayFaixaI.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].RecursoArma == "Não"){
                        arrayFaixaJ.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

                    if(json[i].RecursoArma == "Desconhecido"){
                        arrayFaixaK.push(json[i].Nome, json[i].Idade, json[i].Localidade);
                    }

Then we use another If to show the results inside the array in a paragraph placed on top of the body

if($('#myselect').val() == "faixaA"){

                    document.getElementById("demoA").innerHTML = arrayFaixaA;
                }

                if($('#myselect').val() == "faixaB"){

                    document.getElementById("demoA").innerHTML = arrayFaixaB;
                }

                if($('#myselect').val() == "faixaC"){

                    document.getElementById("demoA").innerHTML = arrayFaixaC;
                }

                if($('#myselect').val() == "faixaD"){

                    document.getElementById("demoA").innerHTML = arrayFaixaD;
                }

                if($('#myselect').val() == "faixaE"){

                    document.getElementById("demoA").innerHTML = arrayFaixaE;
                }

                if($('#myselect2').val() == "faixaF"){

                    document.getElementById("demoA").innerHTML = arrayFaixaF;
                }

                if($('#myselect2').val() == "faixaG"){

                    document.getElementById("demoA").innerHTML = arrayFaixaG;
                }

                if($('#myselect2').val() == "faixaH"){

                    document.getElementById("demoA").innerHTML = arrayFaixaH;
                }

                if($('#myselect3').val() == "faixaI"){

                    document.getElementById("demoA").innerHTML = arrayFaixaI;
                }

                if($('#myselect3').val() == "faixaJ"){
                
                    document.getElementById("demoA").innerHTML = arrayFaixaJ;
                }

                if($('#myselect3').val() == "faixaK"){

                    document.getElementById("demoA").innerHTML = arrayFaixaK;
                }

The data within the json are these:

[
    {
        "id": "1",
        "Nome": "Lucia Rodrigues",
        "Idade": "48",
        "Localidade": "Lagoa",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "2",
        "Nome": "Nome Desconhecido",
        "Idade": "46",
        "Localidade": "Ilha Terceira",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "Sim",
        "sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "id": "3",
        "Nome": "Vera Silva",
        "Idade": "30",
        "Localidade": "Almada",
        "Faixa Etaria": "26-35",
        "Faixa": "faixaC",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "id": "4",
        "Nome": "Maria Eufrázia",
        "Idade": "83",
        "Localidade": "Terena",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "5",
        "Nome": "Luzia Rosado",
        "Idade": "80",
        "Localidade": "Terena",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "6",
        "Nome": "Fernanda",
        "Idade": "70",
        "Localidade": "Oeiras",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "7",
        "Nome": "Nome Desconhecido",
        "Idade": "48",
        "Localidade": "Ilha Terceira",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "id": "8",
        "Nome": "Marina Mendes",
        "Idade": "25",
        "Localidade": "Moimenta da Beira",
        "Faixa Etaria": "18-25",
        "Faixa": "faixaB",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "9",
        "Nome": "Helena Cabrita",
        "Idade": "60",
        "Localidade": "Cruz de Pau",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "Não",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "10",
        "Nome": "Lana",
        "Idade": "2",
        "Localidade": "Cruz de Pau",
        "Faixa Etaria": "0-17",
        "Faixa": "faixaA",
        "Tribunal": "Não",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "11",
        "Nome": "Fernando Cruz",
        "Idade": "60",
        "Localidade": "Porto",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Masc",
        "RecursoArma": "Não"
    },
    {
        "id": "12",
        "Nome": "Ana Maria Silva",
        "Idade": "53",
        "Localidade": "Ilha Terceira",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "id": "13",
        "Nome": "Ana Paula",
        "Idade": "40",
        "Localidade": "Salamonde, Vieira do Minho",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "Não",
        "sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "id": "14",
        "Nome": "Heila Lopes",
        "Idade": "44",
        "Localidade": "Ventosa, Torres Vedras",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Tribunal": "???",
        "sexo": "Fem",
        "RecursoArma": "Não"
    }
]

And I’d like to know how I can make the filters work together in a way that will better restrict the results.

1 answer

1


Try to change the way you are filtering the data. The way you are using is not scalable, you are rewriting all the logic for each different filter.

I suggest you use the method filter.

const dados  = [{"id":"1","Nome":"Lucia Rodrigues","Idade":"48","Localidade":"Lagoa","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Fem","RecursoArma":"Sim"},{"id":"2","Nome":"Nome Desconhecido","Idade":"46","Localidade":"Ilha Terceira","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"Sim","sexo":"Fem","RecursoArma":"Não"},{"id":"3","Nome":"Vera Silva","Idade":"30","Localidade":"Almada","Faixa Etaria":"26-35","Faixa":"faixaC","Tribunal":"???","sexo":"Fem","RecursoArma":"Não"},{"id":"4","Nome":"Maria Eufrázia","Idade":"83","Localidade":"Terena","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Fem","RecursoArma":"Sim"},{"id":"5","Nome":"Luzia Rosado","Idade":"80","Localidade":"Terena","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Fem","RecursoArma":"Sim"},{"id":"6","Nome":"Fernanda","Idade":"70","Localidade":"Oeiras","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Fem","RecursoArma":"Sim"},{"id":"7","Nome":"Nome Desconhecido","Idade":"48","Localidade":"Ilha Terceira","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Fem","RecursoArma":"Não"},{"id":"8","Nome":"Marina Mendes","Idade":"25","Localidade":"Moimenta da Beira","Faixa Etaria":"18-25","Faixa":"faixaB","Tribunal":"???","sexo":"Fem","RecursoArma":"Sim"},{"id":"9","Nome":"Helena Cabrita","Idade":"60","Localidade":"Cruz de Pau","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"Não","sexo":"Fem","RecursoArma":"Sim"},{"id":"10","Nome":"Lana","Idade":"2","Localidade":"Cruz de Pau","Faixa Etaria":"0-17","Faixa":"faixaA","Tribunal":"Não","sexo":"Fem","RecursoArma":"Sim"},{"id":"11","Nome":"Fernando Cruz","Idade":"60","Localidade":"Porto","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Masc","RecursoArma":"Não"},{"id":"12","Nome":"Ana Maria Silva","Idade":"53","Localidade":"Ilha Terceira","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Fem","RecursoArma":"Sim"},{"id":"13","Nome":"Ana Paula","Idade":"40","Localidade":"Salamonde, Vieira do Minho","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"Não","sexo":"Fem","RecursoArma":"Não"},{"id":"14","Nome":"Heila Lopes","Idade":"44","Localidade":"Ventosa, Torres Vedras","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Tribunal":"???","sexo":"Fem","RecursoArma":"Não"}]
const filtro = {"Faixa":"","sexo":"","RecursoArma":""}
popular_tabela(dados)

function change_myselect(chave, valor) {
    filtro[chave] = valor

    const dadosFiltrados = dados.filter(p => 
        (!filtro['Faixa']       || p['Faixa']       === filtro['Faixa']) &&
        (!filtro['sexo']        || p['sexo']        === filtro['sexo'])  &&
        (!filtro['RecursoArma'] || p['RecursoArma'] === filtro['RecursoArma'])
    )

    popular_tabela(dadosFiltrados)
}

function popular_tabela(dadosTabela) {
    $('#corpo_tabela').empty().append(dadosTabela.map(p => `
        <tr>
            <td>${p.id}</td>
            <td>${p.Nome}</td>
            <td>${p.Idade}</td>
            <td>${p.Localidade}</td>
            <td>${p.Tribunal}</td>
            <td>${p.sexo}</td>
            <td>${p.RecursoArma}</td>
        </tr>`
    ))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table, th, td {
    border: 1px solid black;
}
</style>

<select id="myselect" class="classa" onchange="change_myselect('Faixa', this.value)">

    <option value="">Faixa etária</option>
    <option class="opcoes" value="faixaA">0 a 17 anos</option>
    <option class="opcoes" value="faixaB">18 a 25 anos</option>
    <option class="opcoes" value="faixaC">26 a 35 anos</option>
    <option class="opcoes" value="faixaD">36 ou mais</option>
    <option class="opcoes" value="faixaE">Desconhecido</option>
</select>

<br> <br>

<select id="myselect2" class="classb" onchange="change_myselect('sexo', this.value)">
    <option class="opcoes" value="">Sexo:</option>
    <option class="opcoes" value="Mas">Masculino</option>
    <option class="opcoes" value="Fem">Feminino</option>
    <option class="opcoes" value="Desconhecido">Desconhecido</option>
</select>

<br> <br>

<select id="myselect3" class="classc" onchange="change_myselect('RecursoArma', this.value)">

    <option class="opcoes" value="">Recurso a arma:</option>
    <option class="opcoes" value="Sim">Sim</option>
    <option class="opcoes" value="Não">Não</option>
    <option class="opcoes" value="Desconhecido">Desconhecido</option>
</select>

<br> <br>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>Idade</th>
            <th>Localidade</th>
            <th>Tribunal</th>
            <th>Sexo</th>
            <th>Recurso Arma</th>
        </tr>
    </thead>
    <tbody id="corpo_tabela"></tbody>
</table>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.