Populate and filter a dropdown with an array of objects using AngularJS

Question

I have the following data structure thats coming from an API.

$scope.cityList = [{
"_id": {
    "$oid": "584ebd7f734d1d55b6dd4e5e"
},
"cityName": "New York",
"region": "north",
"people": [
    { "id": 1, "name": "x" },
    { "id": 2, "name": "y" },
    { "id": 3, "name": "z" },
    { "id": 4, "name": "a" },
    { "id": 5, "name": "b" },
    { "id": 6, "name": "c" }
]
},
{
"_id": {
    "$oid": "584ebd7f734d1d55b6dd4e5e"
},
"cityName": "New Jersey",
"region": "South",
"people": [
    { "id": 1, "name": "x" },
    { "id": 2, "name": "y" },
    { "id": 3, "name": "z" },
    { "id": 4, "name": "a" },
    { "id": 5, "name": "b" },
    { "id": 6, "name": "c" }
]
}]

I'm trying to setup two dropdowns:

the first one displays a list of the cityNames
the second displays the list of all people names from the selected city.

I also want to save the id of the selected user name into a variable.

I've tried this so far:

<select ng-model="city">
    <option ng-repeat="city in cityList" value="{{city.cityName}}">{{city.cityName}}</option>
</select>

<select ng-model="selectedItem">
    <optgroup ng-repeat="option in cityList | filter: city">
        <option ng-repeat="x in option.people">{{x}}</option>
</select>

@lin In my angular controller, the data comes from an API and save it in the cityList object. i.e $scope.cityList = dataFromAPI — Skywalker
– Skywalker, Commented Dec 13, 2016 at 9:25
Thanks, that wasn't clear. Coding is not imaging :) You should edit your question. — lin
– lin, Commented Dec 13, 2016 at 9:25
You should normalize your response in JavaScript due to the use case of your dropdown's. Do you need a working example? — lin
– lin, Commented Dec 13, 2016 at 9:26

Mistalis · Accepted Answer · 2016-12-13 09:34:56Z

3

You should use ng-options:

<select ng-model="selectedCity" 
        ng-options="c as c.cityName for c in cityList">
</select>

<select ng-model="selectedPerson" 
        ng-options="p as p.name for p in selectedCity.people">
</select>

Demo on JSFiddle.

edited Dec 13, 2016 at 9:34

answered Dec 13, 2016 at 9:31

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lin Over a year ago

Great +1 KISS!!

Skywalker Over a year ago

This worked perfectly. Thank you. Learned something new today!

Collectives™ on Stack Overflow

Populate and filter a dropdown with an array of objects using AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related