Skip to main content
título editado
Link
David Mv
  • 722
  • 8
  • 21

usar selects com javascript para selecionarfiltrar dados dentro do json

adicionou 1701 caracteres ao conteúdo
Fonte Link
David Mv
  • 722
  • 8
  • 21

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

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

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>
removeu 2226 caracteres do conteúdo
Fonte Link
David Mv
  • 722
  • 8
  • 21

Olá eu queria saber como posso criar uma chave para chamar a informação do json para fora,tenho 3 selects e queria sabereu gostava que eles funcionassem mais ou menos como posso imprimir as informações através de um paragrafoo 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.

Eu em baixo de um select que tenho incluido no html que serve de filtro, tenho uma paragrafo com um id=demoA e queria usar esse id, se me conseguirem ajudar a passar a informação de nome, idade e localidade eu ficava bastante agradecido.

json: (está em um ficheiroficheiro a parte com o nome de dados.json que supostamente ja ta conectado)

em teoria so preciso de criar uma chave e usar essa chave para chamar as informações de dentro do json mas eu não sei como fazer e depois mostrar os dados no paragrafo

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.

O meu select é este:

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

e aquele paragrafo com o id = demoA é onde vai escrever o nome a idade e a localidade das pessoas do json

PS: Se faltar algo no codigo ou algo no codigo estiver errado digam me para eu poder corrigir tambem se faz favor

eu queria saber como posso criar uma chave para chamar a informação do json para fora, e queria saber como posso imprimir as informações através de um paragrafo.

Eu em baixo de um select que tenho incluido no html que serve de filtro, tenho uma paragrafo com um id=demoA e queria usar esse id, se me conseguirem ajudar a passar a informação de nome, idade e localidade eu ficava bastante agradecido.

json: (está em um ficheiro a parte com o nome de dados.json que supostamente ja ta conectado)

em teoria so preciso de criar uma chave e usar essa chave para chamar as informações de dentro do json mas eu não sei como fazer e depois mostrar os dados no paragrafo

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.

O meu select é este:

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

e aquele paragrafo com o id = demoA é onde vai escrever o nome a idade e a localidade das pessoas do json

PS: Se faltar algo no codigo ou algo no codigo estiver errado digam me para eu poder corrigir tambem se faz favor

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.

json: (ficheiro a parte com o nome de dados.json)

título editado
Link
David Mv
  • 722
  • 8
  • 21
Carregando
adicionou 2138 caracteres ao conteúdo
Fonte Link
David Mv
  • 722
  • 8
  • 21
Carregando
Fonte Link
David Mv
  • 722
  • 8
  • 21
Carregando