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 Elisame Araújo
      Seguinte, estou criando uma página dinâmica para um site de clã de jogos e essa página vai listar todos os membros. Até aí, tudo bem, eu consegui buscar dentro do banco de dados os nomes dos membros, mas, quando preciso com que uma div que abre um lightbox com resumo do perfil do membro, acaba retornando apenas o resultado referente a primeira ID, no caso a 1. O que rola é todos os membros, ficam com a mesma informação de resumo curto e UF, por exemplo, mesmo que no banco de dados isso seja individual. Para explicar melhor:
       
      Este código, busca os membros e algumas colunas no banco de dados.
      $conecta = mysqli_connect($servidor,$usuario,$senha,$banco); if(mysqli_connect_errno()) { die("Falha ao se conectar com: " . mysqli_connect_errno()); } //Consulta Membros $membros = "SELECT m.id, m.nick, m.estado, m.idstatus, m.resumocurto, m.resumolongo, m.data_cadastro, m.canalyt, assalto, medico, suporte, atirador, pilotoaviao, tanque, pilotoheli "; $membros .= " FROM membros as m "; $membros .= " JOIN afinclasse as af "; $membros .= " on m.id = af.id "; $membros .= " where af.id and m.id "; $resultados = mysqli_query($conecta,$membros); if(!$resultados) { die("Falha na consulta de dados. A coluna da tabela selecionada não existe ou seu nome está incorreto."); } ?> Que em seguida são exibidos dentro de:
      <h3 style="margin-top: 25px;"><strong>Membros Ativos</strong></h3> <div class="agileinfo-team-grids"> <?php while($membros = mysqli_fetch_assoc($resultados)) { ?> <!--- INÍCIO----> <div class="col-md-3 wthree-team-grid usuario-foto"> <img src="images/profile-pic/pic-temp.png" alt="" /> <h4><a href="perfil.php?usuario=<?php echo $membros['nick'] ?>"><?php echo $membros['nick'] ?></a> #<?php echo $membros['id'] ?><br> <span class="badge-membro">Membro</span> </h4> <div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div> </div> <div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Resumo Rápido</h4> </div> <div class="modal-body"> <div class="agileits-w3layouts-info"> <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p> <p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p> <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p> <p><strong>Jogos:</strong> <div class="Qtip"> <img src="images/jogos/bf2.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 2</span> </div> <div class="Qtip"> <img src="images/jogos/bf3.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 3</span> </div> <div class="Qtip"> <img src="images/jogos/bf4.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 4</span> </div> <div class="Qtip"> <img src="images/jogos/bf1.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield 1</span> </div> <div class="Qtip"> <img src="images/jogos/bfv.png" width="26" class="alinhamento-estado"> <span class="Qtiptext">Battlefield V</span> </div> </p> <p><strong>Patente na Platoon:</strong> Cabo</p> </div> </div> </div> </div> </div> <!--- FIM ----> </div> Porém, quando dentro deste código em específico (abaixo), no caso, que abre um lightbox, ele repete os dados da ID 1 do BD, não seguindo, pra ID 2, ID 3, etc.
      No caso são as variáveis "resumocurto" e "estado" que se repetem igualmente para todos.
      <div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Resumo Rápido</h4> </div> <div class="modal-body"> <div class="agileits-w3layouts-info"> <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p> <p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p> <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p> <p><strong>Jogos:</strong> "Lista de Jogos"</p> <p><strong>Patente na Platoon:</strong> Cabo</p> O mais engraçado é, quando eu faço essa busca dentro de uma lista <ul> ou <ol>, ele retorna os dados normalmente para cada perfil.
      <ul> <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li> <li>Ativo: <?php echo $membros["idstatus"] ?></li> <li>Estado: <?php echo $membros["estado"] ?></li> <li>Resumo Curto: <?php echo $membros["resumocurto"] ?></li> <li>Resumo Longo: <?php echo $membros["resumolongo"] ?></li> <li>Assalto: <?php echo $membros["assalto"] ?></li> <li>Médico: <?php echo $membros["medico"] ?></li> <li>Suporte: <?php echo $membros["suporte"] ?></li> <li>Atirador: <?php echo $membros["atirador"] ?></li> <li>Piloto de Avião: <?php echo $membros["pilotoaviao"] ?></li> <li>Tanque: <?php echo $membros["tanque"] ?></li> <li>Piloto de Heli: <?php echo $membros["pilotoheli"] ?></li> <li>Canal Youtube: <a href="<?php echo $membros['canalyt'] ?>" target="_blank">Link</a></li> <li>Adicionado Em: <?php echo date('d-m-Y / H:i:s', strtotime($membros['data_cadastro'])) ?></li> </ul> Existe alguma limitação no PHP para ele exibir dados numa DIV que abre a partir de um lightbox? Porque ele só retorna esses dados normalmente através de uma lista? O que eu preciso modificar no código em si para fazer com que ele apareça normalmente?
       
      Não sei se ficou claro...
    • By Giovanird
      Olá a todos!

      Abaixo lista minha estrutura em Json. Há grupos que faltam um objeto (TIPO) e ao listar recebo o erro  por não encontrá-lo.
      Existe alguma maneira de verificar se este objeto existe e caso não, ignorar?

      Desde já agradeço a atenção.

       
      ESTUTURA JSON: [ { “titulo”: “JSON”, “data”: “20/10/2020”, “ano”: 2020, “tipo”: novo }, { “titulo”: “HTML”, “data”: “20/10/2020”, “ano”: 2020, “tipo”: usado }, { “titulo”: “PHP”, “data”: “20/10/2020”, “ano”: 2020 } ] CAPTURANDO OS DADOS: $titulo = $decode->titulo; $data = $decode->data; $ano = $decode->ano; $tipo = $decode->tipo;  
       
    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
    • By carlosmassam
      Bom noite a todos.

      Eu tenho o seguinte código
       
      <input type="radio" id="radio01" name="radio01" value="radio01"> <input type="radio" id="radio02" name="radio02" value="radio02"> <input type="radio" id="radio03" name="radio03" value="radio03"> <input type="radio" id="radio04" name="radio04" value="radio04"> <input type="radio" id="radio05" name="radio05" value="radio05"> Este código me apresenta 5 radiobuttons distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbuttons anteriores, e os radionbutton posteriores fossem "deschecado".
      Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
      Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
    • By vinissant7
      Boa tarde Amigos,
       
      Estou precisando que quando o usuário esteja logado, e ele clique em um link dentro da imagem (tag area com HREF) ele cadastre no banco de dados o nome e email do usuário e a hora que ele entrou no link, lembrando que quando ele loga ele inicia uma SESSION.
       
      é possivel fazer isso na tag <map> <area href="####" > </map> ?
       
      Desde já obrigado!
       
×

Important Information

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