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.

Can u please tell what problem you are facing

Umair Farooq
– Umair Farooq

2016-08-31 08:23:43 +00:00
Commented Aug 31, 2016 at 8:23 — Umair Farooq
– Umair Farooq, Commented Aug 31, 2016 at 8:23
Hi , I am just getting [ALL , Delhi] not bangalore .

Nicoleta Wilskon
– Nicoleta Wilskon

2016-08-31 10:05:55 +00:00
Commented Aug 31, 2016 at 10:05 — Nicoleta Wilskon
– Nicoleta Wilskon, Commented Aug 31, 2016 at 10:05

Umair Farooq · Accepted Answer · 2016-08-31 11:31:59Z

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

Jithin Joy · Accepted Answer · 2016-08-31 11:34:18Z

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

Collectives™ on Stack Overflow

Displaying the values from json response to dropdown list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related