Using Angular Chosen to allow a multi select drop down for nationalities.

I am getting an error of

"a.forEach is not a function"

This error occurs whether you have selected one, two or zero options.

I have looked at this post

Getting a a.foreach is not a function error

however my selected value is already an array so it does not provide any help on the issue.

Here is my html

<li class="form-row">
                <span class="label">
                    <label for="nation">Nationality</label>:
                </span>
                <div class="field country">
                    <select 
                    chosen
                    multiple
                    ng-model='person.nation'
                    ng-options='c.name as c.name for c in countries'
                    id="nation" 
                    data-select-max="2" 
                    data-token="Nationalities" 
                    data-placeholder="- Select your nationalities -">
                    </select>
                </div>
            </li>

And my options ($scope.countries) looks like

[ 
  { id="1",  name="United States"}, 
  { id="2185",  name="Afghanistan"},
  etc....
 ]

Any advice would be much appreciated.

Using Angular Chosen to allow a multi select drop down for nationalities. https://github./localytics/angular-chosen

I am getting an error of

"a.forEach is not a function"

This error occurs whether you have selected one, two or zero options.

I have looked at this post

Getting a a.foreach is not a function error

however my selected value is already an array so it does not provide any help on the issue.

Here is my html

<li class="form-row">
                <span class="label">
                    <label for="nation">Nationality</label>:
                </span>
                <div class="field country">
                    <select 
                    chosen
                    multiple
                    ng-model='person.nation'
                    ng-options='c.name as c.name for c in countries'
                    id="nation" 
                    data-select-max="2" 
                    data-token="Nationalities" 
                    data-placeholder="- Select your nationalities -">
                    </select>
                </div>
            </li>

And my options ($scope.countries) looks like

[ 
  { id="1",  name="United States"}, 
  { id="2185",  name="Afghanistan"},
  etc....
 ]

Any advice would be much appreciated.

• javascript
• jquery
• angularjs
• foreach
• angular-chosen

Share Follow edited May 23, 2017 at 12:23 CommunityBot 111 silver badge asked Jan 14, 2016 at 10:48 user2085143user2085143 4,23277 gold badges4242 silver badges7171 bronze badges 3

• It assumes that countries is an array, and {} isn't an array. – Matheno Commented Jan 14, 2016 at 10:54
• If I do 'console.log($scope.countries.constructor === Array)' it returns true – user2085143 Commented Jan 14, 2016 at 10:57
• You're right. Didn't see the brackets. Some good suggestions are found here : github./wangshijun/angular-bootstrap-chosen/issues/1 – Matheno Commented Jan 14, 2016 at 10:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The properties of the array objects should be assigned like this: id:"1", name:"United States", instead of id="1". Replace the equal sign (=) with colon (:).

Also you should use forEach function in the following way:

angular.forEach($scope.countries, function(key, value){
// your code here
 });

and not as a function of the array: $scope.countries.forEach(...)