Handling Response datas and moving into array - angularjs

Question

I have a response from backend. Where I need to pass the state based on selected country in dropdown and City based on selected state in dropdown for my form.
I am able to push them into array , but it is getting replaced. For instance.Country India also will have states of USA ,it has been replaced with india states.Need Assistance.
Response :
Geography :
[{"countryname":"India",
"states":[{"statename":"Karnataka",
"cities":[{"city":"Bangalore","segments":[{"segment":""}]},
{"city":"Hubli","segments":[{"segment":""}]}]},
{"statename":"Tamil Nadu",
"cities":[{"city":"Chennai","segments":[{"segment":""}]},
{"city":"Coimbatore","segments":[{"segment":""}]}]}]},
{"countryname":"USA",
"states":[{"statename":"California",
"cities":[{"city":"San Francisco","segments":[{"segment":""}]},{"city":"San Jose","segments":[{"segment":""}]}]},
{"statename":"New Jersey",
"cities":[{"city":"Princeton","segments":[{"segment":""}]},
{"city":"South Brunswick","segments":[{"segment":""}]}]}]}]
JS :
UserService.Geography(json).then(function(response) {
$scope.model.countries = [];
$scope.model.countries.push("ALL");
if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success') {
var geography = response.json.response.geography;
console.log("Geography : " + JSON.stringify(geography));
$scope.geography = geography;
for (var i = 0; i < geography.length; i++) {
$scope.model.countries.push(geography[i].countryname);
console.log($scope.model.countries);
if (($scope.model.countries != []) || ($scope.model.countries != null)) {
$scope.model.states = [];
$scope.model.states.push("ALL");
for (var j = 0; j < geography[i].states.length; j++) {
if (geography[i].states) {
$scope.model.states.push(geography[i].states[j].statename);
} else {
$scope.model.states.push(geography[i].state[j].statename);
}
console.log($scope.model.states);
if (($scope.model.states != []) || ($scope.model.states != null)) {
$scope.model.cities = [];
$scope.model.cities.push("ALL");
// for first time combobox loading,
// load only cities for first state
if (j === 0) {
for (var k = 0; k < geography[i].states[j].cities.length; k++) {
console.log('======k=====:'+k);
console.log('geography[i].states[j].cities[k].city=====:'+geography[i].states[j].cities[k].city);
if (geography[i].states) {
$scope.model.cities.push(geography[i].states[j].cities[k].city);
} else {
$scope.model.cities.push(geography[i].state[j].cities[k].city);
};
console.log('$scope.model.cities: '+ $scope.model.cities);
if (($scope.model.cities != []) || ($scope.model.cities != null)) {
$scope.model.segments = "_ALL";
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];
}
});
}

Answer 1

Just transform your data to array of objects with format like
{ country, state, city }
example transform with lodash:
var data = [];
var cities = _.flatMap(data, mapCountries);
function mapCountries(country){
return _.flatMap(country.states, mapStates).map(setAttr('country', country.countryname));
}
function mapStates(state){
return state.cities.map(setAttr('state', state.statename));
}
function setAttr(key, value){
return function(obj){
obj[key] = value;
return obj;
}
}