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

fsantos · Abril 6, 2020

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

<!DOCTYPE html>
<html>
<head>

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>

$(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();

});

</script>

</head>
<body>

</form>
</body>

</html>

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

wanderval · Abril 9, 2020

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