Angularjs reading JSON positions

Question

I have a JSON of states and cities as follows:

{
  "estados": [
    {
      "sigla": "AC",
      "nome": "Acre",
      "cidades": [
        "Acrelândia",
        "Assis Brasil",
        "Brasiléia",
        "Bujari",
        "Capixaba",
        "Tarauacá",
        "Xapuri"
      ]
    },
    {
      "sigla": "AL",
      "nome": "Alagoas",
      "cidades": [
        "Água Branca",
        "Anadia",
        "Arapiraca"
      ]
}

and continues this way for all states of Brazil.

What I’m unable to do is fill a < select > (combo) with all states, and after selecting the state fill another < select > listing all cities of this state.

What I’ve done so far is:

$scope.ListarEstados = function GetEstados(){
        var listaEstados = estadosCidadesService.GetEstados();
        listaEstados.then(function(response){
            console.log(response.data);
            $scope.ListEstados = response.data.estados.map(function(retAPI){                
                return{
                    UF: retAPI.sigla,
                    NOMEUF: retAPI.nome    
                };    
            });

        });                     
    };

o . html

  <div class="form-group">
        <label class="control-label">Estado</label>
     <select ng-model="estadoscidades.ESTADO" class="form-control">
        <option ng-repeat="e in ListEstados">{{e.UF}}</option>
     </select>
 </div> 

Now the city do not know how to do according to the selected state.

Thank you!

Answer 1

I would do with this logic, bringing the data and putting in a variable without modifying your data or formatting, after that just use ng-Options and two variables to load the return information, ie take the result of GetEstados() and pass as in my example that is fixed to the variable $scope.json the rest the Angularjs ago, minimal example:

Example 1:

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {  
  $scope.json = {
    "estados": [{
        "sigla": "AC",
        "nome": "Acre",
        "cidades": [
          "Acrelândia",
          "Assis Brasil",
          "Brasiléia",
          "Bujari",
          "Capixaba",
          "Tarauacá",
          "Xapuri"
        ]
      },
      {
        "sigla": "AL",
        "nome": "Alagoas",
        "cidades": [
          "Água Branca",
          "Anadia",
          "Arapiraca"
        ]
      }
    ]
  };
  $scope.uf = $scope.json.estados[0];  
  $scope.cidade = $scope.uf.cidades[0];  
  $scope.setCidadeFirst  = function()
  {
    $scope.cidade = $scope.uf.cidades[0];
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div>
    <label class="control-label">Estados:</label>
    <select class="form-control" 
      ng-model="uf" 
      ng-options="a.sigla for a in json.estados"
      ng-change="setCidadeFirst()">   
   </select>
  </div>
  <div>
    <label class="control-label">Cidades:</label>
    <select class="form-control"
    ng-model="cidade"
    ng-options="item for item in uf.cidades">   
   </select>
  </div>  
</div>

---

Example 2:

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {  
  $scope.json = {
    "estados": [{
        "sigla": "AC",
        "nome": "Acre",
        "cidades": [
          "Acrelândia",
          "Assis Brasil",
          "Brasiléia",
          "Bujari",
          "Capixaba",
          "Tarauacá",
          "Xapuri"
        ]
      },
      {
        "sigla": "AL",
        "nome": "Alagoas",
        "cidades": [
          "Água Branca",
          "Anadia",
          "Arapiraca"
        ]
      }
    ]
  };
  $scope.uf = $scope.json.estados[0];    
  $scope.setCidadeFirst = function()
  {
    $scope.cidade = 0;  
  }
  $scope.setCidadeFirst();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div>
    <label class="control-label">Estados:</label>
    <select class="form-control" 
      ng-model="uf" 
      ng-options="a.sigla for a in json.estados"
      ng-change="setCidadeFirst()">   
   </select>
  </div>
  <div>
    <label class="control-label">Cidades:</label>
    <select class="form-control"
    ng-model="cidade">       
    <option value="0" selected>Escolha a Cidade</option>
    <option ng-repeat="c in uf.cidades" value="{{c}}">
      {{c}}
    </option>
   </select>
  </div>  
</div>

_References:

• ng-Options
• Angularjs