Angular JS bind results from api to dropdown menu

Question

Hi ya'll I am trying to take this data that is returned from an api:

[{"Language":{"Id":1,"Name":"English"},"Occupations":[{"Id":1,"Name":"Banquet Server"},{"Id":2,"Name":"Bar Tender"},{"Id":3,"Name":"Catering Manager"}]

and bind it to a dropdown menu using angular JS:

$scope.industry = [];

    $http.get('/industrygroup?languageid=1')
        .then(function (result) {
            $scope.industry = result.data;
        });

and here is the HTML layout

<select class="form-control" style="width:25% !important; margin-bottom:20px;" ng-model="industry">

but my dropdown menu appears blank....what I am trying to do is display each name from the json above.....anyone have any suggestions? Here is some more of angular JS code:

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

myApp.controller('WizardController', function($scope){

    $scope.industry = [];

    $http.get('/industrygroup?languageid=1')
        .then(function (result) {
            $scope.industry = result.data;
        });

  $scope.user = {
    agree: null
  };

});

$scope.user is what I use to collect data from input fields.

Please show what items you want to appear in the drop down. Also `ng-model` on a select tag is the selected item, while `ng-options` is used to define the available items. — Brocco, Jun 04 '14 at 17:09
which names? "Language/Occupations" or "English" or "Banquet Server/Bar Tender" — Brocco, Jun 04 '14 at 17:15

Andres · Accepted Answer · 2014-06-04T17:52:28.707

2

maybe you need

*.js

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

myApp.controller('WizardController', function($scope){

    $scope.industry = [];

    $http.get('/industrygroup?languageid=1')
        .then(function (result) {
            $scope.industry = result.data;
        });

  $scope.user = {
    agree: null
  };
  $scope.selected = null;

});

*.html

<select data-ng-options="p.Name for p in industry[0].Occupations" data-ng-model="selected">
</select>

Also

if your json contains many objects like this:

[{
    "Language": {
      "Id": 1,
      "Name": "English"
    },
    "Occupations": [{
      "Id": 1,
      "Name": "Banquet Server"
    }, {
      "Id": 2,
      "Name": "Bar Tender"
    }, {
      "Id": 3,
      "Name": "Catering Manager"
    }]
  } ,
  {
    "Language": {
      "Id": 2,
      "Name": "English2"
    },
    "Occupations": [{
      "Id": 4,
      "Name": "Banquet Server 2"
    }, {
      "Id": 5,
      "Name": "Bar Tender 2"
    }, {
      "Id": 6,
      "Name": "Catering Manager 2"
    }]
  }, ...];

and you want all the Occupations names you can do it:

*.js

$scope.Options = function()
{
   var data =[];

   for(var i = 0;i < $scope.industry.length;i++)
       for(var j = 0;j < $scope.industry[i].Occupations.length;j++)
           data.push($scope.industry[i].Occupations[j].Name);

    return data;
}

*.html

<select>
   <option ng-repeat="op in Options()">{{op}}</option>
</select>

edited Jun 04 '14 at 17:52

answered Jun 04 '14 at 17:11

Andres

4,323
7
39
53

2

`ng-options` requires `ng-model`, so this won't work as presented. It also doesn't match the structure of the JSON the OP presented. – Marc Kline Jun 04 '14 at 17:12
I used ng-options="p.Occupations.name for p in industry" and ng-model="user.industry" user.industry is used for saving the value of the dropdown menu – user3618922 Jun 04 '14 at 17:26
Actually this won't work either, as there is no `Occupations.name` property in the JSON. I think what they may want is to have the occupation names enumerated, so maybe something like ` – Marc Kline Jun 04 '14 at 17:27
yes @MarcKline it is not 100% clear, edit my answer if you want – Andres Jun 04 '14 at 17:29
ahhh now im getting an error saying $http is not defined. – user3618922 Jun 04 '14 at 18:06
that's a differente problem man, try `myApp.controller('WizardController', function($scope, $http){` http://stackoverflow.com/questions/13759120/angularjs-referenceerror-http-is-not-defined http://stackoverflow.com/questions/16882705/angularjs-http-is-not-defined – Andres Jun 04 '14 at 18:17

Brocco · Answer 2 · 2014-06-04T17:39:40.860

Please review this plnkr

The markup will need to look like this:

<select ng-model="occupation" ng-options="occ.Name for occ in industry[0].Occupations"></select>

industry is an array so you'll need to access the first one (based upon your sample data)
within that you want to loop over the Occupations to get the one's you want occ
and you want to display Name so reference it via occ.Name

Note: The controller is using timeout to mimic the $http promise resolution in the plnkr

Angular JS bind results from api to dropdown menu

2 Answers2