Nested array in drop down

Question

I'm new to angular js, so maybe it is a trivial thing, but somehow I cannot get the hang of it. I have an array of objects and in each object there is another array of objects as:

filteredList=[{Company : "IBX", CEO : "ABC", HeadOffice : "US" ,locations : [{Location : "US", RegionalCEO : "ABC"},{Location : "India", RegionalCEO : "CDE"},{Location : "UK", RegionalCEO : "FGH"}]},{Company : "Micr$",HeadOffice : "US", CEO : "Gill", locations : [{Location : "US", RegionalCEO : "Gill"},{Location : "India", RegionalCEO : "QWE"},{Location : "Singapore", RegionalCEO : "XYX"},{Location : "Aus", RegionalCEO : "ZEB"}]},{Company : "Inf",HeadOffice : "India", CEO : "NMrt", locations : [{Location : "India", RegionalCEO : "Nmrt"},{Location : "US", RegionalCEO : "PhM"},{Location : "Denmark", RegionalCEO : "Zyqes"},{Location : "Philipines", RegionalCEO : "Pinesad"},{Location : "Taiwan", RegionalCEO : "Abur"},{Location : "UAE", RegionalCEO : "Abuf"}]}]

There are more properties, but in the interest of time, I am posting just important ones. So I need to populate dropdowns with locations (UK, US, India, UAE, Philipines, etc.) and RegionalCEO.

What i have tried is following:

 < select name="locations" ng-model="locat" ng-options="item.Location for item in filteredList[0].locations"></select >

The above code does not display all values, as I suspected, then I tried the below, after reading few posts:

<select name="locations">
<option ng-repeat-start ="locations in filteredList">
</option>
<option ng-repeat-end ng-repeat="Location in locations" value="{ Location}">{Location}</option>

</select>

This displays empty drop down!!!!

Am I trying something impossible? :) The data cannot be modified as it is provided from another source.

Thank you in advance.

Answer 1

• Use array map() method to fetch the nested array from the array of objects.You will get all three locations array by using this method.

• Use array concat() method to merge the nested arrays on which you want to apply ng-repeat.So, that all the objects from different locations array merge into an single array.

Working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    var filteredList = [{
	Company: "IBX",
	CEO: "ABC",
	HeadOffice: "US",
	locations: [{
		Location: "US",
		RegionalCEO: "ABC"
	}, {
		Location: "India",
		RegionalCEO: "CDE"
	}, {
		Location: "UK",
		RegionalCEO: "FGH"
	}]
}, {
	Company: "Micr$",
	HeadOffice: "US",
	CEO: "Gill",
	locations: [{
		Location: "US",
		RegionalCEO: "Gill"
	}, {
		Location: "India",
		RegionalCEO: "QWE"
	}, {
		Location: "Singapore",
		RegionalCEO: "XYX"
	}, {
		Location: "Aus",
		RegionalCEO: "ZEB"
	}]
}, {
	Company: "Inf",
	HeadOffice: "India",
	CEO: "NMrt",
	locations: [{
		Location: "India",
		RegionalCEO: "Nmrt"
	}, {
		Location: "US",
		RegionalCEO: "PhM"
	}, {
		Location: "Denmark",
		RegionalCEO: "Zyqes"
	}, {
		Location: "Philipines",
		RegionalCEO: "Pinesad"
	}, {
		Location: "Taiwan",
		RegionalCEO: "Abur"
	}, {
		Location: "UAE",
		RegionalCEO: "Abuf"
	}]
}];

var locationsArr = filteredList.map(function(item) {
  return item.locations;
});

$scope.finalArr = locationsArr[0].concat(locationsArr[1]).concat(locationsArr[2]);



});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select name="locations">
<option ng-repeat="locations in finalArr">
{{locations.Location}}
</option>
<option ng-repeat="locations in finalArr">{{locations.RegionalCEO}}</option>
</select>
</div>

Answer 2

Little bit of mistake there, first you need to understand that ng-repeat simply iterates over your data like in a for loop. so suppose you want to extract the location from the given array by using for loop. the code for that would be

for( var i = 0;i< filteredList.length; i++){
         currentItem = filteredList[i]; 
         //when i=0,  current item = {Company : "IBX", CEO : "ABC", HeadOffice : "US" ,locations : [{Location : "US", RegionalCEO : "ABC"},{Location : "India", RegionalCEO : "CDE"},{Location : "UK", RegionalCEO : "FGH"}]}

         //now extract the locations
         var locationsArray = currentItem.locations;
         for( var j = 0 ;j < locationsArray.length ; j++ ){
                 var location = locationsArray[j].Location; 
                 //for j=0 , location = "US"  
         }
} 

now use this logic in ng-repeat.

    <select name="locations">
    <option ng-repeat-start ="item in filteredList">
    <option ng-repeat-end  ng-repeat="location in item.locations" value="{{ location.Location}}">{{location.Location}}</option>
    </option>

    </select>