Displaying the values from json response to dropdown list

Question

I have a JSON respone from REST API . I need to move the values of countries, states and cities into my drop down. My default value will be ALL. I need to push these countries, states and and cities' values in there respective drop downs along with ALL as first value by default.

My output comes as [ALL , Delhi] missing Bangalore.

Response:

 Geography : [{"countryname":"India","state":[{"statename":"Delhi",
"cities":[{"city":"Delhi"}]},{"statename":"Karnataka",
"cities":[{"city":"Bangalore"}]}]}]

HTML :

<form class="form-row " role="form">
    <div class="form-group">
        <label class="control-label col-sm-14" for="groupz">Country*</label>
        <select class="form-control" ng-model="model.selectedCountry" name="country" ng-change="GetCountry(model.selectedCountry)">
       <option ng-repeat=" item in model.countries track by $index" value="{{item}}">{{item}}</option>
      </select>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-20" for="groupz">State*</label>
        <select class="form-control" ng-model="model.selectedState" name="state" ng-change="GetState(model.selectedState)" ng-disabled="model.selectedCountry == 'ALL'">
<option ng-repeat="item in model.states track by $index" value="{{item}}">{{item}}</option> </select>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-20" for="groupz">City*</label>
        <select class="form-control" ng-model="model.selectedCity" name="city" ng-change="GetCity(model.selectedCity)" ng-disabled="model.selectedState == 'ALL' || model.selectedCountry== 'ALL'">
    <option ng-repeat="item in model.cities track by $index" value="{{item}}">{{item}}</option>
    </select>
    </div>

JS:

UserService.Geography(json).then(function(response) {

if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success') {
    var geography = response.json.response.geography;
    console.log("Geography : " + JSON.stringify(geography));


    $scope.model.countries = [];
    $scope.model.countries.push("ALL");

    for (var i = 0; i < geography.length; i++) {

        console.log(geography.length);



        $scope.model.countries.push(geography[i].countryname);
        console.log($scope.model.countries);

        if (($scope.model.countries != []) || ($scope.model.countries != null)) {

            console.log($scope.model.countries.length);

            for (var j = 0; j < $scope.model.countries.length; j++) {

                $scope.model.states = [];
                $scope.model.states.push("ALL");
                $scope.model.states.push(geography[i].state[i].statename);
                console.log($scope.model.states);

                if (($scope.model.states != []) || ($scope.model.states != null)) {

                    console.log($scope.model.states.length);
                    for (var k = 0; k < $scope.model.states.length; k++) {
                        $scope.model.cities = [];
                        $scope.model.cities.push("ALL");
                        $scope.model.cities.push(geography[i].state[i].cities[i].city);
                        console.log($scope.model.cities);

                        if (($scope.model.cities != []) || ($scope.model.cities != null)) {

                            $scope.model.segments = [];
                            var segments = "_ALL";

                            $scope.model.segments.push(segments);
                            console.log($scope.model.segments);

                        }
                    }
                    $scope.model.selectedCity = $scope.model.cities[0];
                }
            }
            $scope.model.selectedState = $scope.model.states[0];
        }
    }
    $scope.model.selectedCountry = $scope.model.countries[0];
}});
}
$scope.model.selectedCountry is the country selected by user in dropdown.

Answer 1

var sourceJson = [{
  "countryname": "India",
  "state": [{
    "statename": "Delhi",
    "cities": [{
      "city": "Delhi"
    }]
  }, {
    "statename": "Karnataka",
    "cities": [{
      "city": "Bangalore"
    }]
  }]
}];


var countries = new Array();
var states = new Array();
var cities = new Array();

countries.push("ALL");
states.push("ALL");
cities.push("ALL");

for (var i = 0; i < sourceJson.length; i++) {

  countries.push(sourceJson[i].countryname);

  var sourceStates = sourceJson[i].state;

  for (var j = 0; j < sourceStates.length; j++) {

    states.push(sourceStates[j].statename);

    var sourceCities = sourceStates[j].cities;
    for (var k = 0; k < sourceCities.length; k++) {
      cities.push(sourceCities[k].city)

    }

  }

}

console.log(countries);
console.log(states);
console.log(cities);

Answer 2

Your code is really buggy and you have used i indexer inside nested loops where you were supposed to use the j and k indexer.

So I rewrote the code with the help of angular.forEach to increase the code's readability as well.

Please have a look. I have tested it at my end as well.

$scope.model = {
        countries: ["ALL"],
        states: ["ALL"],
        cities: ["ALL"]
    };

    angular.forEach(geography, function(value, key) {
        var country = value;
        $scope.model.countries.push(country.countryname);

        if (country.state != null && country.state.length > 0) {

            angular.forEach(country.state, function(value, key) {
                var state = value;
                $scope.model.states.push(state.statename);

                if (state.cities != null && state.cities.length > 0) {

                    angular.forEach(state.cities, function(value, key) {
                        var city = value;
                        $scope.model.cities.push(city.city);
                    })
                }
            })
        }
    });

It will be easy to understand but I am going to explain still what I did. First you need to push ALL in all three arrays countries, cities and states.

So I wrote an object with already initialized arrays containing ALL string in all three arrays.

• The geography array is traversed
• It will push the current country name into countries array
• It then checks that whether this country has any state
• If not, it moves ahead else it traverse all states.
• The same sequence is done in case of states and cities.

Hope that clarifies the code. Let me know if you have any questions. Hope that solves your problem