JOSN Filter

Question

hello Experts,

 

i am new in angularjs  i have following JSON data

$scope.countries = {

'India': {

'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],

'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],

'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']

},

'USA': {

'Alabama': ['Montgomery', 'Birmingham'],

'California': ['Sacramento', 'Fremont'],

'Illinois': ['Springfield', 'Chicago']

},

'Australia': {

'New South Wales': ['Sydney'],

'Victoria': ['Melbourne']

}

};

 

i want only list of country, only list of States

 

ng-options="country for (country, states) in countries" by using this i got whole JSON data..i want only list of country, only list of States.

 

please help...thank u 

Answer 1

$scope.countries = [{ 
     "name": "USA", 
     "id": 1 
   },{ 
     "name": "Canada", "id": 2 
}];


$scope.states = [{ 
       "name": "Alabama", 
       "id": 1, 
       "countryId": 1 
    }, {
       "name": "Alaska",
       "id": 2, 
       "countryId": 1 
    }, { 
       "name": "Arizona", 
       "id": 3, 
       "countryId": 1 
    }, { 
       "name": "Alberta", 
       "id": 4, 
       "countryId": 2 
    }, { 
       "name": "British columbia", 
       "id": 5, 
       "countryId": 2 
}];



<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()"> 
<option value="">Select country</option> 
</select> 

<select data-ng-model="state" data-ng-options="state.name for state in availableStates"> 
<option value="">Select state</option> 
</select>


$scope.updateCountry = function(){   
$scope.availableStates = [];    
angular.forEach($scope.states, function(value){ 
if(value.countryId == $scope.country.id){       
$scope.availableStates.push(value); 
} 
}); 
}
Here is a working plunk for you.