javascript selects to filter json data

Asked

Viewed 187 times

0

Hello I have 3 selects and I would like them to function more or less like the example below...

EXAMPLE: i have different people inside a json file, in select case I select the option "age range 18 to 25" I would write in the paragraph all the people in the json file within that age range but in case the user wants to add a new filter with select the option "male" would only write in the paragraph all people between 18 and 25 male.

This is my script so far and I wonder if this right and what I need to add more to work because it doesn’t work and I can’t find the error.

 <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: (file the part with the.json data name)

[
    {
        "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>

javascript json
  • 1

    Honestly, I couldn’t figure out what you were up to :D

  • I have already updated my question so that people understand what I would like to do! I hope it helps...

  • 1

    Here’s how to create a question with [mcve].

  • OK I think I’ve asked a better and easier question

  • 1

    Puts the html in your filter as well.. I couldn’t understand how your filter is implemented

  • OK it’s already edited!

  • 1

    Why don’t you filter the json properties directly? This can help you: https://answall.com/questions/361563/como-utilizar-filter-do-jquery-com-um-array

  • @Marllonnasser and in case more cases need to be added to the json? also the user chooses whatever appears through the selects

  • @Davidmv then you haven’t defined your scope? If you want to do something dynamic, think about using a third-party filter/listing library like https://datatables.net/

Show 4 more comments

1 answer

1


I still think you need to review your scope and mainly define better what you want.

At the end of the computers what you need is just to filter the json according to what the user wants.

I’ve restructured its scope a little bit just to demonstrate one of the thousands ways to achieve the goal.

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

Or if you prefer... Look at the Fiddle

  • Thanks! is working now the rest is with me! Thanks again!

Browser other questions tagged javascript json

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