Populate a select with ajax with ng-options using AngularJs

Question

With angularJS, I need populate a select with data coming from a ajax call.

I have a controlller called "TabPacProfissionalController".In this controller I do a ajax call to get json data('profissionais object'). So far so good.

My problem is that I get the json data returning from server, but my select is never populate.

What am I missing here?

My ajax return is:

{"results":[{"nr":"8","nome":"AAAAAAAAAAAA"},
{"nr":"17","nome":"BBBBBBB"},
{"nr":"27","nome":"BBBBBAAAAA"},
,{"nr":"1004","nome":"CCCCCCCCC"}]}

HTML

        <div class="form-group">
            <label for="paciente.texto.sexo" class="col-sm-2 control-label">Profissional:</label>
            <div class="col-sm-10" ng-controller="TabPacProfissionalController as tabProfCtrl">
                <select class="form-control" ng-model="selectedProf" ng-options="nome for (nr,nome) in tabProfCtrl.profissionais">
                  <option value=''>Select an option</option>
                </select>
             </div>
        </div>

JS:

app.controller('TabPacProfissionalController', function($http) {
        this.profissionais = {};
        $http.get('/getStaff?tipoProf=1').then(function(response){
                  this.profissionais=response.data.results;
                  console.log(this.profissionais.toString());
        },function(error){
          console.log(error);
        });
      });

Add var self = this; and reference to self inside the http success function — Alon Eitan
– Alon Eitan, Commented Feb 13, 2017 at 22:51

Alexander Staroselsky · Accepted Answer · 2017-02-13 22:55:48Z

1

If you want the label to display the nome property and the value to be the nr property try the following:

<div class="form-group">
    <label for="paciente.texto.sexo" class="col-sm-2 control-label">Profissional:</label>
    <div class="col-sm-10" ng-controller="TabPacProfissionalController as tabProfCtrl">
        <select ng-model="tabProfCtrl.selectedProf" ng-options="profissionais.nr as profissionais.nome for profissionais in tabProfCtrl.profissionais">
            <option value="">Select</option>
        </select>         
    </div>
</div>

(key,value) notation you are using is for object data sources, as in if you wanted to iterate through the properties of a single object, rather than a collection of objects which is what you seem to be getting from the $http call.

To see the parsed server response, you could use angular.fromJson(response.data)

Here is a plunker demonstrating the functionality.

edited Feb 13, 2017 at 22:55

answered Feb 13, 2017 at 22:19

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

9 Comments

Luiz Alves Over a year ago

Sorry. It doesnt works. I get a new error: Error: [ngOptions:iexp] Expected expression in form of 'select (as label)? for (key,)?_value_ in collection' but got 'profissionais.nome for profissionais.nr in tabProfCtrl.profissionais'. Element: <select class="form-control ng-pristine ng-untouched ng-valid" ng-model="selected" ng-options="profissionais.nome for profissionais.nr in tabProfCtrl.profissionais">

Alexander Staroselsky Over a year ago

See my updated answer. I provided a plunker showing the functionality.

Luiz Alves Over a year ago

It doesnt works. The ajax data returning is as I have posted above, when I see in chrome debugger networks tools. But, My console.log(this.profissionais.toString()) shows something as: [object Object],[object Object],[object Object],[object Object],[object Object],.....

Luiz Alves Over a year ago

And each object is something as {"nr":"X", "nome:","AAA"}

Alexander Staroselsky Over a year ago

If you're string to see the string format of your objects, try using JSON.stringify(response.data.results). I added additional display and value options to the plunker link. However, I may not be understanding the issue your having anymore. You tried the ng-options as demonstrated in plunker as nothing is showing? Try angular.fromJSON(). Also you may have an extra comma in your example after {"nr":"27","nome":"BBBBBAAAAA"}

|

Collectives™ on Stack Overflow

Populate a select with ajax with ng-options using AngularJs

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related