1

Eu estou a tentar fazer com que os dados que estão dentro do ficheiro json sejam mostrados no html, eu fiz um primeiro código mas ele estava muito repetitivo com exagerados arrays então tentei fazer de diferente forma mas agora deixou de apresentar os dados do json...

Eu estou a usar 3 selects para servirem de filtros na informação do json:

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

logo abaixo tem um paragrafo que que é onde vai ser mostrado as informações do json

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

passando agora ao script, eu antes tinha criado 11 arrays e decidi tentar de outra forma para nao ter tantos arrays para "apenas" popular dropdowns

codigo atual:

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

                }

O objetivo desse codigo a cima é ler o json todo e armazenar os dados dentro de cada var criada em cima.

Passando a segunda parte do script

basicamente o que faz é ver se utilizou o primeiro, o segundo ou o terceiro select, ver em qual das opção foi escolhido pelo utilizador e reproduzir dentro do paragrafo.

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

Cada "faixaA/B/C/etc" sao a value que estão no select

mas basicamente algo no codigo não está a funcionar e simplesmente nao reproduz o que está dentro do ficheiro json, apenas aparece assim:

inserir a descrição da imagem aqui

Os dados do json são estes:

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

Resumidamente precisava que o nome, a idade e a localidade que estão dentro do json seja representado no paragrafo da maneira mais simples e compacta

Espero que seja possivel uma ajuda

Ps: sou novo nisto e não consigo explicar melhor qual é a minha duvida... :D

1 Resposta 1

0

Você pode iterar sobre o seu JSON, é para cada elemento do JSON você adiciona seus valores no parágrafo <p> deseja. Um exemplo simples abaixo. Espero que possa te ajudar ou dar uma luz de como fazer uma implementação mais completa.

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

Lembrando que no append() você pode inserir novas estruturas HTML que serão criadas para cada iteração no loop. Aí fica a seu critério como criar a estrutura para compor sua resposta dentro no parágrafo. append()

Alterando a função

$.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}`)
})

Apenas digo que não função append , aceita estruturas htmls, para que você possa estrutura os dados na tela para o usuário. Se preferir pode criar uma estrutura de tabela no seu HTML e apenas adicionar as td dinâmica com JQuery, passando as informações di seu Json

Edição abaixo 1) Fiz uma leve alteração o html, modificando o paramentro de entrado para a função no onchenage, e alterando os valores dos options.

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

E agora no javascript fiz este código. Claro que não esta muito bem escrito conforme todas as regras, entretando está funcional para este problema.

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

Bom este código filtra os dados pelo valor selecionado nos selects e exibe na tela caso tenha algum match nos filtros. Tente executar este código e veja se funciona para você.

5
  • Onde é que tenho de por isso? eu nao percebi bem como usar isso, desculpa!
    – David Mv
    6/05/2019 às 14:31
  • David, quando você tem o seu JSON já com todas as informações que quer mostrar no seu elemento p, você faz um loop com como na função acima, e cria um elemento dentro desse p com os dados que estão sendo iterados no momento. 6/05/2019 às 22:27
  • mas eu quero por so algumas coisas nao o json todo, 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.
    – David Mv
    7/05/2019 às 9:30
  • Fala David Cara foi mau demorar a responder pois estava meio corrido aqui. Então entendi oque você esta tentando fazer, fiz uma implementação aqui para te ajudar com esse problema, não é uma solução 100% mais apartir dela você pode fazer alterações do seu gosto. Veja se te ajuda. Vou editar a resposta. 19/05/2019 às 19:25
  • É eu agradeço mas eu ja consegui resolver! obrigado na mesma!
    – David Mv
    20/05/2019 às 12:54

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 .