Populate select with angularjs

Question

I have two little issues when I populate my select with angularjs.

I wnat populate my select with results from an api rest (I used mocky)

My index.html:

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <title>My first app</title>
</head>
<body>
<h1>My first app</h1> 
<div ng-controller="DemoCtrl">
<select ng-model="selectedTestAccount" 
    ng-options="item.id as item.name for item in testAccounts">
<option value="">Select Account</option>
</select>
{{error}}
</div>
</body>
</html>

My app.js:

(function () {
'use strict';

angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
$scope.selectedTestAccount = null;
$scope.testAccounts = [];

$http({
        method: 'GET',
        url: 'http://www.mocky.io/v2/5a2112be2d0000040ee000aa'      
    }).then(function (result) {
    $scope.testAccounts = result;
}).catch(function (err) { $scope.error = err});;
});

})()

API: http://www.mocky.io/v2/5a2112be2d0000040ee000aa

which returns:

{"id" : 1, "name" : "France - Mainland", "desc": "some description"}

Now I have 2 problems:

doing like the above example, the select is rendered partially fine. If I open the select I can see:

as you can see I have the first field correct, but in the other undefined and I don't know why

The second problem is if I have a list of object from API, for example changing url of the call with http://www.mocky.io/v2/5a2132f32d00006116e00178, which returns:

[{"id" : 1, "name" : "France - Mainland", "desc": "some description"}, {"id" : 2, "name" : "Italy", "desc": "some description"}]

I have all option field like undefined (see picture below)

What's wrong?

Thanks!

Sajeetharan · Accepted Answer · 2017-12-01 11:11:27Z

1

The issue is your api returns only one data, which is an object. you need to push the response to your testAccounts array as follows,

  $http({
    method: 'GET',
    url: 'https://www.mocky.io/v2/5a2112be2d0000040ee000aa'
  }).then(function(result) {
    $scope.testAccounts.push(result.data);
    console.log($scope.testAccounts);
  }).catch(function(err) {
    $scope.error = err
  });

DEMO

answered Dec 1, 2017 at 11:11

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

user3336884 Over a year ago

This works only with url: mocky.io/v2/5a2112be2d0000040ee000aa If you try with this mocky.io/v2/5a2132f32d00006116e00178 it doesn't work (the second api returns a list)

Sajeetharan Over a year ago

@Gjord83 as i explained above 2nd link returns array, so you need to assign directly. check here plnkr.co/edit/fFRtdE2oE3OWcow1tksM?p=preview

user3336884 Over a year ago

Sorry, I didn't understand well. Thank you!

Vasu Mullapudi · Accepted Answer · 2017-12-01 11:48:24Z

0

<select ng-model="selectedTestAccount" ng-if="item.name"
    ng-options="item.id as item.name for item in testAccounts">
<option value="">Select Account</option>
</select>

ng-if will allow when only the value is defined

answered Dec 1, 2017 at 11:48

Vasu Mullapudi

577 bronze badges

1 Comment

user3336884 Over a year ago

thanks, but I would know why, there are some undefined fields, whether the api returns one object and no one undefined

Collectives™ on Stack Overflow

Populate select with angularjs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related