2

Como é que eu posso criar uma decisão em json?

Imaginem eu tenho duas variáveis e essas variáveis tem uma faixa etária e eu queria fazer com que SE a primeira opção (faixa etária de 0 a 17) for escolhida a angela era mostrada no ecra mas o john não e CASO seja a segunda opção seja so o john a aparecer.

Ate agora a unica coisa que faz é caso escolhas qualquer opção as duas pessoas vão aparecer.

        <select class="filtros" onchange="change_myselect(this.value)">
            <option value="">Faixa etária</option>
            <option class="opcoes" value="0 a 17 anos">0 a 17 anos</option>
            <option class="opcoes" value="18 a 25 anos">18 a 25 anos</option>
            <option class="opcoes" value="26 a 35 anos">26 a 35 anos</option>
            <option class="opcoes" value="36 ou mais">36 ou mais</option>
            <option class="opcoes" value="Desconhecido">Desconhecido</option>
        </select>

        <p id="demo5"></p>
    
        <p id="demo6"></p>

        <script>
            function change_myselect(sel) {
                var person1 = {firstName:"John", lastName:"Doe", faixa_etaria: "18-25"};
                var person2 = {firstName:"Angela", lastName:"Octo", faixa_etaria: "0-17"};

                document.getElementById("demo5").innerHTML =
                person1.firstName + " está na faixa etária dos " + person1.faixa_etaria; 

                document.getElementById("demo6").innerHTML =   
                person2.firstName + " está na faixa etária dos " + person2.faixa_etaria; 

            }
        </script>

0

1 Resposta 1

6

O que precisa no seu caso é a aplicação de um if convencional usando o próprio JavaScript.

Antes de mais nada, alguns ajustes feitos no seu código (modificando algumas partes propositalmente para que você veja mais possibilidades).

  • Demos um id ao select, para podermos capturar seu valor

    <select id="sel" class="filt...">
    //      ^^^^^^^^
    
  • Alteramos os values para a idade máxima apenas, só para facilitar o if

  • Pegamos a idade selecionada no onchange com

    var sel = document.getElementById("sel");
    var idadeMax = sel.options[sel.selectedIndex].value;
    

    Isto é necessário, pois primeiro nós precisamos saber o índice selecionado (de 0 ao numero máximo de opções - 1 ), para podermos depois obter seu value.

  • Com esta informação em idadeMax, basicamente fazemos um

    if (parseInt(idadeMax) <= idade_maxima) {
    

    Notar o sinal de <= e não de <, pois a idade máxima ainda está na mesma faixa. Além disso, como pegamos a máxima como referência, temos que testar do menor valor para o maior.

  • Em vez de ter um <p> para cada saída, podemos usar o mesmo, afinal só um valor será exibido por vez. Em vez de demo5 e demo6, vamos chamar apenas de demo.

Aplicando ao seu código:

<select id="sel" class="filtros" onchange="change_myselect(this.value)">
  <option value="">Faixa etária</option>
  <option class="opcoes" value="17">0 a 17 anos</option>
  <option class="opcoes" value="25">18 a 25 anos</option>
  <option class="opcoes" value="35">26 a 35 anos</option>
  <option class="opcoes" value="999">36 ou mais</option>
  <option class="opcoes" value="Desconhecido">Desconhecido</option>
</select>

<p id="demo"></p>

<script>
  function change_myselect(sel) {
    var person1 = {firstName:"John", lastName:"Doe", faixa_etaria: "18-25"};
    var person2 = {firstName:"Angela", lastName:"Octo", faixa_etaria: "0-17"};

    var sel = document.getElementById("sel");
    var idadeMax = sel.options[sel.selectedIndex].value;
    
    if (parseInt(idadeMax) <= 17) {
      document.getElementById("demo").innerHTML =
          person2.firstName + " está na faixa etária dos " + person2.faixa_etaria;
    } else if (parseInt(idadeMax) <= 25){
      document.getElementById("demo").innerHTML =
          person1.firstName + " está na faixa etária dos " + person1.faixa_etaria;
    } else {
      document.getElementById("demo").innerHTML =
          " opção invalida";
    }
  }
</script>


Ainda falta todo um universo de coisas...

O código acima foi para ilustrar os elementos faltantes para uma mínima aplicação de if, else if e else, mas num caso real, precisa fazer algo em mais complexo. Segue uma lista de coisas a pensar para você evoluir o código:

  • Numa aplicação real os testes não devem depender das idades dentro do if, o correto seria um loop avaliando o próprio objeto (que você chama de JSON, mas na verdade é só um "JSO"), afinal, se um dia for mudar a faixa de idades, você não deve precisar mexer nos ifs, e sim apenas nos dados. E no próprio objeto você deve armazenar a mínima e a máxima separadamente

  • Precisa ter uma maneira de armazenar a mínima e a máxima separadadmente. No seu exemplo original, tinha posto textualmente nos values. Tem outras maneiras de fazer isso - por exemplo em pares 18,25 e depois quebrando em duas variáveis no JS, ou mesmo usando data-min="18" data-max="25" no HTML (pesquise por "data values" aqui mesmo no SOpt)

  • Para simplificar a demonstração eu criei um "bug dos mil anos de idade", que é usar 999 na terceira opção como idade máxima. Dá para fazer de maneira mais limpa

    Tem uma resposta bem legal aqui neste post que mostra como pegar os valores usando JS puro: Como alterar o valor de um atributo "data" em JQuery? se quiser usar a idéia do data-min e do data-max em vez de value (ou um misto das duas coisas)

1
  • 1
    Mt bom.........
    – Meu ovo
    18/04/2019 às 18:11

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 .