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