How to bind array data to dropdown in angularjs?

Question

Hi I am developing web application in angularjs. I am trying to bind data to drodpown. I am making ajax call to get data from server. I am getting error Cannot read property 'length' of undefined. I am making get request. This is my api. http://192.168.0.213:1234/api/Customer/Nationalities

Above api will return

{"status":"Success","msg":"Success","code":"200","data":[{"ID":1,"Nationality":"indian"},{"ID":2,"Nationality":"england"}]}

I am binding using js as below.

  var url = cfg.Baseurl;
            var nationality = new Array();
            $http.get(url + 'api' + '/Customer/' + 'Nationalities').success(function (data) {
                $.map(data.data.Nationality, function (item) {
                    nationality.push(item);
                    console.log(item);
                });
                $scope.nationalityList = nationality;
            }).error(function (status) {
            });

This is my html code.

   <select ng-model="user.nationality" id="brand" ng-options="user.nationality for user in nationalityList" required>
                            <option value="" label="Select">Select</option>
                        </select>

I ended up with Cannot read property 'length' of undefined error. Any help would be appreciated. Thank you.

In your controller, can you try initializing your array to an empty array.. $scope.nationalityList = [] — mridula
– mridula, Commented May 25, 2017 at 6:33

Jayant Patil · Accepted Answer · 2017-05-25 06:39:14Z

Here is the demo link Jsfiddle demo

JS code

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

  app.controller('ctrl', function($scope) {
    $scope.nationalityList = {
      "status": "Success",
      "msg": "Success",
      "code": "200",
      "data": [{
        "ID": 1,
        "Nationality": "indian"
      }, {
        "ID": 2,
        "Nationality": "england"
      }]
    };
  });

** HTML **

  <div ng-app='myApp'>

    <div ng-controller='ctrl'>
      <select ng-model="user.nationality" id="brand" ng-options="user.Nationality for user in nationalityList.data" required>
        <option value="" label="Select">Select</option>
      </select>
      <span>nationality = {{user.nationality}}</span>
    </div>
  </div>

Hope this will help you out

Alan Olivares · Accepted Answer · 2017-05-25 06:52:48Z

In this case it is not necessary to map, it only assigns the value of the array

var url = cfg.Baseurl;
var nationality = [];
$http.get(url + 'api' + '/Customer/' + 'Nationalities')
.success(function (data) {
    if(data.data) {
        // Here the value is assigned
        $scope.nationalityList = data.data;
    }
}).error(function (status) { });

And your html has to go like this

<select
    ng-model="selectedNationality"
    id="brand"
    ng-options="item.Nationality for item in nationalityList" 
    required>
    <option value="" label="Select">Select</option>
</select>
<!-- Showing selected option -->
<p ng-if="selectedNationality">Selected option: {{selectedNationality}}<p/>

For more information https://docs.angularjs.org/api/ng/directive/ngOptions

mridula · Accepted Answer · 2017-05-25 06:57:08Z

1

Because $scope.nationalityList is not initialized, it is undefined at the time when the view is being rendered. Hence the error Cannot read property 'length' of undefined error..

Just initializing the variable to an empty array will solve this error.

answered May 25, 2017 at 6:57

mridula

3,3113 gold badges34 silver badges58 bronze badges

Comments

Cruzer · Accepted Answer · 2017-05-25 06:39:05Z

0

Hope this helps:

Use $scope.anArray =[];

Bind the data to array from $http response.

Angular js How to populate dropdown with JSON without ng-options

Example: http://plnkr.co/edit/evQJAKvMnl4btz4BZeuP?p=preview

I am sure you are using Json object response.

answered May 25, 2017 at 6:39

Cruzer

4055 silver badges13 bronze badges

Comments

cmTanko · Accepted Answer · 2017-05-25 08:47:06Z

0

$.map(data.data.Nationality, function (item) {
                    nationality.push(item);
                    console.log(item);
                });

data.data.Nationality is not valid,as data.data is an array and not object so, nationality = data.data would work fine

answered May 25, 2017 at 8:47

cmTanko

1156 bronze badges

Collectives™ on Stack Overflow

How to bind array data to dropdown in angularjs?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Related