0

Olá eu tenho 3 selects e eu gostava que eles funcionassem mais ou menos como o exemplo a baixo...

EXEMPLO: eu tenho diferente pessoas dentro de um ficheiro json, no select caso eu seleccione a opção "faixa etária 18 a 25" escreveria no paragrafo todas as pessoas no ficheiro json dentro dessa faixa etária mas caso o utilizador queira adicionar um novo filtro com seleccionar a opção "masculinos" só iria escrever no paragrafo todas as pessoas entre os 18 e os 25 masculinos.

Esse é o meu script até agora e gostava de saber se esta certo e o que preciso de adicionar mais para funcionar, pois ele não funciona e eu não encontro o erro.

 <script type="text/javascript">
    
        function change_myselect(value) {

            $.getJSON("dados.json", function(json) {
                
                console.log(json);
                
                var faixas = { };
                var genero = { };
                var armas = { };
                
                for(var i = 0; i < json.length; i++) {

                    if (faixas[json[i].Faixa] == undefined) {
                        faixas[json[i].Faixa] = ["FaixaA"];
                        faixas[json[i].Faixa] = ["FaixaB"];
                        faixas[json[i].Faixa] = ["FaixaC"];
                        faixas[json[i].Faixa] = ["FaixaD"];
                        faixas[json[i].Faixa] = ["FaixaE"];
                    }   

                    if (genero[json[i].Sexo] == undefined) {
                        genero[json[i].Sexo] = ["Masc"];
                        genero[json[i].Sexo] = ["Fem"];
                        genero[json[i].Sexo] = ["Desconhecido"];
                    }

                    if (armas[json[i].RecursoArma] == undefined) {
                        armas[json[i].RecursoArma] = ["Sim"];
                        armas[json[i].RecursoArma] = ["Não"];
                        armas[json[i].RecursoArma] = ["Desconhecido"];
                    }

                        faixas[json[i].Faixa].push(json[i].Nome + " " + json[i].Idade + " " + json[i].Localidade);

                        genero[json[i].Sexo].push(json[i].Nome + " " + json[i].Idade + " " + json[i].Localidade);  

                        armas[json[i].RecursoArma].push(json[i].Nome + " " + json[i].Idade + " " + json[i].Localidade);

                }

json: (ficheiro a parte com o nome de dados.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"
    },
    {
        "Id": 12,
        "Nome": "Ana Maria Silva",
        "Idade": 53,
        "Localidade": "Ilha Terceira",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Sim"
    },
    {
        "Id": 13,
        "Nome": "Ana Paula",
        "Idade": 40,
        "Localidade": "Salamonde, Vieira do Minho",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    },
    {
        "Id": 14,
        "Nome": "Heila Lopes",
        "Idade": 44,
        "Localidade": "Ventosa, Torres Vedras",
        "Faixa Etaria": "36 ou mais",
        "Faixa": "faixaD",
        "Sexo": "Fem",
        "RecursoArma": "Não"
    }
]

HTML:

    <div class="container-fluid">
        <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>  

            <br>

        <p id="demoA"></p>

    </div>

9
  • 1
    Na boa, não consegui entender nada do que vc está querendo fazer :D
    – Sam
    Commented 6/05/2019 às 15:35
  • ja atualizei a minha pergunta de modo a que as pessoas percebam o que gostava de fazer! espero que ajude...
    – David Mv
    Commented 6/05/2019 às 15:48
  • 1
    Veja aqui como criar uma pergunta com Exemplo Mínimo, Completo e Verificável.
    – Francisco
    Commented 7/05/2019 às 12:26
  • 1
    Coloca o html do seu filtro também.. não consegui entender a forma como seu filtro está implementado Commented 7/05/2019 às 14:38
  • 1
    Por que vc não filtra as propriedades do json diretamente? Isso pode te ajudar: pt.stackoverflow.com/questions/361563/… Commented 7/05/2019 às 15:13

1 Resposta 1

1

Eu ainda acho que você precisa rever o seu escopo e principalmente definir melhor o que você quer.

No fim das cnotas o que você precisa é somente filtrar o json de acordo com o que o usuário quer.

Reestruturei um pouco o seu escopo somente para demonstar uma das milhares formas de atingir o objetivo.

//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"},{"Id":12,"Nome":"Ana Maria Silva","Idade":53,"Localidade":"Ilha Terceira","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Sexo":"Fem","RecursoArma":"Sim"},{"Id":13,"Nome":"Ana Paula","Idade":40,"Localidade":"Salamonde, Vieira do Minho","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Sexo":"Fem","RecursoArma":"Não"},{"Id":14,"Nome":"Heila Lopes","Idade":44,"Localidade":"Ventosa, Torres Vedras","Faixa Etaria":"36 ou mais","Faixa":"faixaD","Sexo":"Fem","RecursoArma":"Não"}];

$("#btnBuscar").click(function() {
  var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
  var filtroSexo = $("#Sexo option:selected").text();
  var filtroRecursoArma = $("#RecursoArma option:selected").text();
	
  var arrayResultados = json.filter(function(item) {
    var criteria = true;
    
    if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
    	criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
    if (filtroSexo != null && filtroSexo != "")
    	criteria = criteria && item["Sexo"] == filtroSexo;
    if (filtroRecursoArma != null && filtroRecursoArma != "")
    	criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
    
    return criteria;
  });

  alert("Foram encontrados " + arrayResultados.length + " elementos de acordo com a busca");

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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>

Ou se preferir... Veja o Fiddle

1
  • Obrigado! está a funcionar agora o resto é comigo! Obrigado outra vez!
    – David Mv
    Commented 8/05/2019 às 8:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .