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
– Brocco, Commented Jun 4, 2014 at 17:09
which names? "Language/Occupations" or "English" or "Banquet Server/Bar Tender" — Brocco
– Brocco, Commented Jun 4, 2014 at 17:15

Andres · Accepted Answer · 2014-06-04 17:52:28Z

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 4, 2014 at 17:52

answered Jun 4, 2014 at 17:11

Andres

4,5318 gold badges42 silver badges53 bronze badges

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

6 Comments

Marc Kline Over a year ago

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.

user3618922 Over a year ago

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

Marc Kline Over a year ago

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 <select ng-options="p.name for p in industry[0].Occupations">, but they really have to clarify to say for sure

Andres Over a year ago

yes @MarcKline it is not 100% clear, edit my answer if you want

user3618922 Over a year ago

ahhh now im getting an error saying $http is not defined.

|

Brocco · Accepted Answer · 2014-06-04 17:39:40Z

2

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

edited Jun 4, 2014 at 17:39

answered Jun 4, 2014 at 17:30

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Collectives™ on Stack Overflow

Angular JS bind results from api to dropdown menu

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related