Jump to content
fsantos

Como formar select option através de um json com multiplos niveis

Recommended Posts

tenho o seguinte codigo e queria uma ajuda para fazer a iteração correta no arquivo json

 

<!DOCTYPE html>
<html>
<head>

<title>Mapa</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
      body{margin:0 auto; width:480px; font-family: arial;}
    input.text, textarea, select {
    border: 1px solid #C0C0BA;
    -webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.17);
    }

input, textarea, select {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    }
      @media only screen and (max-width: 600px) {
          body {
        width:90%;

               }
        }
</style>

<script type="text/javascript" src="https://fcosantos.com.br/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

  $(document).ready(function () {

    $.getJSON('https://fcosantos.com.br/projetos/covidForm/portugal.json', function (data) {

      var items = [];
      var options = '<option value="">Escolha o distrito</option>';

      $.each(data, function (key, val) {
        options += '<option value="' + val.nome + '">' + val.nome + '</option>';
      });
      $("#estados").html(options);

      $("#estados").change(function () {

        var options_cidades = '';
        var str = "";

        $("#estados option:selected").each(function () {
          str += $(this).text();
        });

        $.each(data, function (key, val) {
          if(val.nome == str) {
            options_cidades += '<option value="">Escolha o conselho</option>';
            $.each(val.cidades, function (key_city, val_city) {
              options_cidades += '<option value="' + val_city.nome + '">' + val_city.nome + '</option>';
            });
          }
        });

        $("#cidades").html(options_cidades);


        //Busca das freguesias

        $("#cidades").change(function () {

        var options_freguesias = '';
        var str2 = "";

        $("#cidades option:selected").each(function () {
          str2 += $(this).text();
        });

        $.each(data, function (key2, val2) {
          if(val2.cidades.nome == str2) {
            options_freguesias += '<option value="">Escolha a freguesia</option>';
            $.each(val2.cidades.freguesias, function (key_freg, val_freg) {
              options_freguesias += '<option value="' + val_freg.nome + '">' + val_freg.nome + '</option>';
            });
          }
        });

        $("#freguesias").html(options_freguesias);

        }).change();


        }).change();

    });

  });

    </script>

    </head>
    <body>

        <form method="get" action="">


        <select name="uf" id="estados" style="width:47%; padding:5px; margin-bottom:8px; float:left;">
            <option value=""></option>
        </select>
        <select name="cid" id="cidades" style="width:47%; padding:5px; margin-bottom:8px; float:right;">
        </select>
        <select name="freg" id="freguesias" style="width:100%; padding:5px; margin-bottom:8px;">
        </select>
        <input type="submit" value="Buscar" style="width:100%; padding:5px; margin-bottom:20px; ">

</form>
</body>

</html>


O que ocorre é que ao selecionar o primeiro select o segundo é preenchido altomaticamente, mais nao entendi porque o segundo não.

Share this post


Link to post
Share on other sites

Existem alguns problemas:

 1- cidade não tem propriedade "nome" e sim "nomecidades"

 2-freguesias tb não tem propriedade "nome" e sim "nomefreguesias"

 3-Ao iterar os estados para setar as cidades, você está considerando cidades um objeto e não um array

 4- seu código está precisando melhorar, está muito díficil de ler se não fosse a semantica dos metodos do jquery ficaria complicado. Fiz um refactor em outro link da uma olhada e ve se consegue aproveitar algo.

 

Obs: os testes foram feitos com um mock da API que você disponibilizou mas tive que reduzir pro poder testar, mas a estrutura segue como a original.

 

 

código comentado no item 3

$.each(data, function (key2, val2) {
  if(val2.cidades.nome == str2) {
    options_freguesias += '<option value="">Escolha a freguesia</option>';
    $.each(val2.cidades.freguesias, function (key_freg, val_freg) {
    	options_freguesias += '<option value="' + val_freg.nome + '">' + val_freg.nome + '</option>';
    });
  }
});

 

JSON:

[{
	"nome": "Aveiro",
	"code": 1,
	"coorddistrito": "40.6791686,-8.997076",
	"cidades": [{
		"nomecidades": "Águeda",
		"code": 101,
		"coordconselho": "40.5832995,-8.4542056",
		"freguesias": [{
				"nomefreguesias": "Aguada de Cima",
				"code": 10103,
				"coordfreguesia": "40.5200465,-8.4307529"
			},
			{
				"nomefreguesias": "Fermentelos",
				"code": 10109,
				"coordfreguesia": ""
			}
		]
	}]
}]

link com fix: https://jsbin.com/sasetadene/edit?html,js,output

link com refactor: https://jsbin.com/caqucajebu/edit?html,js,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By Leonel57
      Prezados,
      Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.
      Ele é um menu de produtos.
      Poderiam me ajudar?
      <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style type="text/css"> .container { border: 1px solid gray; display: inline-block; float: right; margin-right: 150px; margin-left: 300px; border-spacing: 5px; padding: :5px; } p { text-align:center; } .menulateral{ background-color:#5F9EA0; width: 250px; height: 1000px; } ul{ list-style: none; } ul li a{ display: block; font-size: 18px; font-family: 'Arial'; padding: 10px; border-bottom: solid 1px #FFFFF0; color: #ccc; text-decoration: none; } ul li span{ float: right; padding-right: 10px; } ul li a:hover{ background-color: #5b859a; } .conteudo{ display: table; } </style> </head> <body> <nav class = menulateral> <ul> <li><a href="racao-cachorro.html">Ração para Cachorros</a></li> <li><a href="">Peticos e Ossos</a></li> <li><a href="">Casas e Tocas</a></li> <li><a href="">Coleiras</a></li> <li><a href="">Tapetes e Fraldas</a></li> <li><a href="">Briquendos</a></li> <li><a href="">Camas e Cobertores</a></li> <li><a href="">Portões</a></li> <li><a href="">Grades</a></li> </ul> <ul> <li><a href="petisco-gato.html">Petiscos para Gatos</a></li> <li><a href="areia-gato.html">Areia</a></li> <li><a href="">Beleza e Limpeza</a></li> <li><a href="">Arranhadores e Brinquedos</a></li> <li><a href="">Coleiras e Peitorais</a></li> <li><a href="">Roupas</a></li> </ul> <ul> <li><a href="alimentacao-passaro.html">Alimentacao</a></li> <li><a href="gaiola-passaro.html">Gaiolas</a></li> <li><a href="">Puleiro</a></li> <li><a href="">Acessorios</a></li> <li><a href="">Farmácia</a></li> </ul> <ul> <li><a href="alimentacao-peixe.html">Alimentacao</a></li> <li><a href="aquario-peixe.html">Aquários</a></li> <li><a href="">Decoração</a></li> </ul> </nav> <nav class = "conteudo"> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> </div> </nav> </body> </html>  



    • By fideles
      Fala pessoal, como anda as coisas?
       
      Meu conhecimento em JS e quase neutro, conheço algo, mais talvez não o suficiente para o que eu precise, por isso venho pedir ajuda a vocês,
       
      Tenho um pequeno programinha, simples mesmo que tem 4 areas (Administração, Compras, Financeiro, Almoxarifado).
       
      Quem fica na ADM solicita algo,  compras visualiza e da um "ok" e o financeiro tbm tem que dar um "ok" e no final, o almoxarifado dá um "Processo Concluido" (está parte está ok, funcionando, sem erro)
       
      Meu problema seria que quem está no almoxarifado consegue clicar no botão "Processo Concluido" mesmo o pessoal de compras e financeiro não dando um "ok" na solicitação ou ele tbm consegue dar "Processo Concluido" se um ou outro dar um "ok". Precisaria que ele so conseguisse dar "Processo Concluido" se os dois darem o "ok", se so um dar "ok" ele não pode dar "Processo Concluido".
       
      Alguém consegue pelo menos me dar um norte para que eu possa dar continuidade? Já tentei em PHP e nada.
       
    • By ZeroEnd
      Boa tarde.
       
      Gostaria que me ajudassem em uma dúvida, pois estou aprendendo. 
      Tenho um arquivo com o seguinte código.
       
      Ex:
      <?php $dados = '{"nome":"Antonio", "endereco":"Rua que sobe e desce", "telefone": "+55 xx 9 9xxxx-xxxx"}'; $obj = json_decode($dados); echo "Nome: $obj->nome<br>"; echo "Endereço: $obj->endereco<br>"; echo "Telefone: $obj->telefone<br>";  
      Bom esse retorna: 
       
      Nome: Antonio
      Endereço: Rua que sobe e desce
      Telefone: +55 xx 9 9xxxx-xxxx
       
      Agora o problema que enfrento é que eu quero usar um arquivo .json externo, mas não sei o que fazer.
      ex:
      nome-do-arquivo.json
       
      {"nome":"Antonio", "endereco":"Rua que sobe e desce", "telefone": "+55 xx 9 9xxxx-xxxx"}  
      Como que eu faria para chamar o arquivo com php.
       
      Desde já agradeço pela ajuda.
    • By emmanuelsiqueira30
      Pessoal boa tarde.
      Gostaria de saber como posso pegar os valores da linha na tabela <table> que eu clicar no link visualizar dados na coluna opções e aparecer dados do banco daquela linha.
       
       
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.