How to create a key for an object

Question

I’m trying to make the data inside the json file be shown in html, I made a first code but it was very repetitive with exaggerated arrays so I tried to do it differently but now no longer present the data of json...

I’m using 3 selects to filter json information:

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

below is a paragraph that is where the json information will be shown

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

moving on to the script, I had previously created 11 arrays and decided to try another way to not have so many arrays for "just" popular dropdowns

current code:

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"];
                    }

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

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

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

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

                }

The purpose of this code above is to read the whole json and store the data within each var created above.

Passing the second part of the script

basically what it does is to see if you used the first, the second or the third select, see which option was chosen by the user and play inside the paragraph.

if($('#myselect').val() == "faixaA"){
                    document.getElementById("demoA").innerHTML = faixas;
                }

                if($('#myselect').val() == "faixaB"){
                    document.getElementById("demoA").innerHTML = faixas;
                }

                if($('#myselect').val() == "faixaC"){
                    document.getElementById("demoA").innerHTML = faixas;
                }

                if($('#myselect').val() == "faixaD"){
                    document.getElementById("demoA").innerHTML = faixas;
                }

                if($('#myselect').val() == "faixaE"){
                    document.getElementById("demoA").innerHTML = faixas;
                }

                if($('#myselect2').val() == "faixaF"){
                    document.getElementById("demoA").innerHTML = genero;
                }

                if($('#myselect2').val() == "faixaG"){
                    document.getElementById("demoA").innerHTML = genero;
                }

                if($('#myselect2').val() == "faixaH"){
                    document.getElementById("demoA").innerHTML = genero;
                }

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

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

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

Each "faixaA/B/C/etc" is the value in the select

but basically something in the code is not working and simply does not reproduce what is inside the json file, it just appears like this:

The json data are these:

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

Briefly, it required that the name, age and location within the json be represented in the paragraph in the simplest and most compact way

I hope we can help

PS: I’m new to this and I can’t explain better what my doubt is... D

Answer 1

You can iterate over your JSON, it is for each JSON element you add its values in paragraph <p> wish. A simple example below. I hope I can help you or shed some light on how to make a more complete implementation.

$.each(json, function (i, v){
    $('#demoA').append(
          `Nome: ${v.Nome}, 
            Idade: ${v.Idade}, 
            Localidade: ${v.Localidade}`)
})

Recalling that in the append() you can insert new HTML structures that will be created for each iteration in the loop. There it is at your discretion how to create the structure to compose your answer in the paragraph. append()

Changing the function

$.each(json, function (i, v){
    $('#demoA').append(
          //aqui você pode construir seu HTML apenas para formatar os dados na tela.
          `<b>Nome:<b/> ${v.Nome}, 
            <b>Idade:<b/> ${v.Idade}, 
            <b>Localidade:<b/> ${v.Localidade}`)
})

I’m just saying it doesn’t work append , accepts htmls structures, so you can structure the data on the screen for the user. If you prefer you can create a table structure in your HTML and just add the td dynamics with Jquery, passing the information from your Json

Edition below 1) I made a slight change to html, modifying the input parameter for the function in onchenage, and changing the options values.

 <select id="myselect" class="classa" onchange="change_myselect(this)">
                <option value="" disabled selected>Faixa etária</option>
                <option class="opcoes" value="0;17">0 a 17 anos</option>
                <option class="opcoes" value="18;25">18 a 25 anos</option>
                <option class="opcoes" value="26;35">26 a 35 anos</option>
                <option class="opcoes" value="36;">36 ou mais</option>
                <option class="opcoes" value="Desconhecido;">Desconhecido</option>
            </select>
            <button type="button" id="novaConsulta">Editar faixa etaria</button>
            <br> <br>

            <select id="myselect2" class="classb" disabled onchange="change_myselect(this)">
                <option class="opcoes" value="" selected disabled>Sexo:</option>
                <option class="opcoes" value="Masc;">Masculino</option>
                <option class="opcoes" value="Fem;">Feminino</option>
                <option class="opcoes" value="Desconhecido;">Desconhecido</option>
            </select>

            <br> <br>

            <select id="myselect3" class="classc" disabled onchange="change_myselect(this)">
                <option class="opcoes" value="" selected disabled>Recurso a arma:</option>
                <option class="opcoes" value="Sim;">Sim</option>
                <option class="opcoes" value="Não;">Não</option>
                <option class="opcoes" value="Desconheido;">Desconhecido</option> 
            </select>
            <div id="demoA"></div>

And now in javascript I made this code. Of course it is not very well written according to all the rules, Searching is functional for this problem.

<script>
        var dados = [
        {
            "Id": 1,
            "Nome": "Lucia Rodrigues",
            "Idade": 48,
            "Localidade": "Lagoa",
            "Faixa Etaria": "36 ou mais",
            "Faixa": "faixaD",
            "Sexo": "Fem",
            "RecursoArma": "Sim"
        },
        {
            "Id": 1,
            "Nome": "Lucia 2",
            "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"
        }
    ]
        var options = {}

        $("#novaConsulta").click(()=>{
            $('#myselect').prop('disabled', false)
            $("#myselect2, #myselect3").prop("disabled",true)
            $('#demoA').empty()
        })

        function change_myselect(valor){
            $("#myselect2, #myselect3").prop("disabled",false)
            $("#myselect").prop('disabled',true)

            var result = [];
            var params = valor.value.split(';')
            var params_filtered = params.filter((ele)=>{
                return ele != "";
            })

            switch (valor.id){
            case "myselect":
                    options["FaixaEtaria"] = params_filtered;
                    break;
            case "myselect2":
                    options["Sexo"] = params_filtered.join();
                    break;
                case "myselect3":
                    options["Armas"] = params_filtered.join();
                    break;
            }

            if(options.FaixaEtaria){
                if(options.FaixaEtaria.length > 1){
                    var porFaixa = dados.filter((ele)=>{
                        return ele.Idade >= options.FaixaEtaria[0] && ele.Idade <= options.FaixaEtaria[1]
                    })
                }else{
                    var porFaixa = dados.filter((ele)=>{
                        return ele.Idade >= options.FaixaEtaria[0]
                    })
                }
                if(porFaixa){
                    porFaixa.forEach((ele) => {
                        result.push(ele)
                    })
                }else{
                    result = []
                }
            }
            if(options.Sexo){
                var porSexo = result.filter((ele)=>{
                    return ele.Sexo === options.Sexo
                })  
                if(porSexo){
                    result = porSexo
                }else{
                    result = []
                }
            }
            if(options.Armas){
                var porArmas = result.filter((ele)=>{
                    return ele.RecursoArma == options.Armas
                })
                if(porArmas){
                    result = porArmas
                }else{
                    result = []
                }

            }
            $("#demoA").empty()
            $.each(result, (i, v) => {
                $('#demoA').append(`
                <hr/>
                    <p> Id : ${v.Id} </p>
                    <p> Nome : ${v.Nome} </p>
                    <p> Idade : ${v.Idade} </p>
                    <p> Localidade : ${v.Localidade} </p>
                    <p> Faixa Etaria : ${v["Faixa Etaria"]} </p>
                    <p> Faixa : ${v.Faixa} </p>
                    <p> Sexo : ${v.Sexo} </p>
                    <p> Recuso Armas : ${v.RecursoArma} </p>
                    <hr/>
                `)
            })
        }

    </script>

Well this code filters the data by the selected value in the selects and displays on the screen if you have any match in the filters. Try running this code and see if it works for you.