$. each on a JSON of cities

Question

I am with a Json of cities in the following structure:

 var cidade = [
    {
      "sigla": "AC",
      "nome": "Acre",
      "cidades": [
        "Acrelândia",
        "Assis Brasil",
        "Brasiléia",
        "Bujari",
        "Capixaba",
        "Cruzeiro do Sul",
        "Epitaciolândia",
        "Feijó",
        "Jordão",
        "Mâncio Lima",
        "Manoel Urbano",
        "Marechal Thaumaturgo",
        "Plácido de Castro",
        "Porto Acre",
        "Porto Walter",
        "Rio Branco",
        "Rodrigues Alves",
        "Santa Rosa do Purus",
        "Sena Madureira",
        "Senador Guiomard",
        "Tarauacá",
        "Xapuri"
      ]
    },
    {
      "sigla": "AL",
      "nome": "Alagoas",
      "cidades": [
        "Água Branca",
        "Anadia",
        "Arapiraca",
        "Atalaia"....

It has a select that at the moment the State is selected I catch the acronym as follows:

    $('#estado').change(function(){
        var estado = $(this).val();
         /*foreach inicia aqui

        })
    })

I am trying to take all cities and play within a select by the acronym that is stored in the variable state, however I am not succeeding...someone would have a solution to this case. Thank you

Answer 1

That way I think it solves your problem.

var cidade = [
{
  "sigla": "AC",
  "nome": "Acre",
  "cidades": [
    "Acrelândia",
    "Assis Brasil",
    "Brasiléia",
    "Bujari",
    "Capixaba",
    "Cruzeiro do Sul",
    "Epitaciolândia",
    "Feijó",
    "Jordão",
    "Mâncio Lima",
    "Manoel Urbano",
    "Marechal Thaumaturgo",
    "Plácido de Castro",
    "Porto Acre",
    "Porto Walter",
    "Rio Branco",
    "Rodrigues Alves",
    "Santa Rosa do Purus",
    "Sena Madureira",
    "Senador Guiomard",
    "Tarauacá",
    "Xapuri"
  ]
},
{
  "sigla": "AL",
  "nome": "Alagoas",
  "cidades": [
    "Água Branca",
    "Anadia",
    "Arapiraca",
    "Atalaia"
  ]
}
];
//Aqui pegue o estado conforme achar melhor
const estado = "AC";

const resultado = getCidades(cidade,estado);

console.log(resultado);

function getCidades(cidades,estado){
    let cidadesDoEstado=[];
    cidades.forEach(element => {
        if(element.sigla==estado){
            cidadesDoEstado = element.cidades;
        }
    });
    return cidadesDoEstado;
}

I hope I’ve helped!

Answer 2

You can do as in the example below, using the method change() and thus go through the arrays city that give match with the select of states:

let dados = [{
    "sigla": "AC",
    "nome": "Acre",
    "cidades": [
      "Acrelândia",
      "Assis Brasil",
      "Brasiléia",
      "Bujari",
      "Capixaba",
      "Cruzeiro do Sul",
      "Epitaciolândia",
      "Feijó",
      "Jordão",
      "Mâncio Lima",
      "Manoel Urbano",
      "Marechal Thaumaturgo",
      "Plácido de Castro",
      "Porto Acre",
      "Porto Walter",
      "Rio Branco",
      "Rodrigues Alves",
      "Santa Rosa do Purus",
      "Sena Madureira",
      "Senador Guiomard",
      "Tarauacá",
      "Xapuri"
    ]
  },
  {
    "sigla": "AL",
    "nome": "Alagoas",
    "cidades": [
      "Água Branca",
      "Anadia",
      "Arapiraca",
      "Atalaia"
    ]
  }
];

let cidades = $('#cidades');
let cidade;

$(() => {
  $('#estados').on('change', () => {
    var estado = $('#estados').val();              // pega o valor selecionado
    cidades.empty();                               // limpa o select de cidades
    mostraCidade(estado);                          // executa a função com estado de parâmetro
  })
})

function mostraCidade(estado) {
  for (let i = 0; i < dados.length; i++) {         // percorre o array principal

    if (dados[i].sigla == estado) {                // pega o estado conforme a seleção
      cidades.show();                              // mostra o select de cidades escondido
      cidade = dados[i].cidades;                   // guarda as cidades respectivas
      for (let y = 0; y < cidade.length; y++)      // percorre as cidades respectivas
        cidades.append($('<option>', {             // cria as tags option
          text: cidade[y]                          // insere as cidades nos options
        }))
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="estados">
  <option selected disabled>Selecionar</option>
  <option value="AC">Acre</option>
  <option value="AL">Alagoas</option>
</select>

<select id="cidades" hidden></select>