CODEWITHSUNDEEP
htmlangulartypescriptangular2-observables
Euridice01
Euridice01

Reputation: 2568

Can't get dropdownlist to bind to an array being returned from my service

I have a service that contains a method that gets a list of employees: 

export class EmployeeService {

    private employeesUrl = 'http://localhost:portnum/api/employees';


    getEmployees(): Observable<IEmployee[]> {
        return this.http.get<IEmployee[]>(this.employeesUrl).catch(this.errorHandler);
    }
}

In my Component, I have this snippet which fetches the list of employees from my service: 

employees = [];

constructor(private fb: FormBuilder, private _employeeService: EmployeeService) {
    this.transactionForm = fb.group ({
      'employee': [null, Validators.required]
    });
  }

  ngOnInit() {
    this._employeeService.getEmployees().subscribe(data => this.employees = data, error => this.errorMsg = error);
  }

and in my html code, I have a dropdownlist that binds to list of employees: 

<span style="padding-right:60px;">{{'Employee' | translate}}*
          <select [ngModel]="null" formControlName="employee" [ngClass]="displayErrors ? 'inputRedBorder': 'input'" required >
            <option value="null" disabled selected>{{'SelectEmployee' | translate}}</option>
            <option *ngFor="let employee of employees">{{employee}}</option>
        </select>
        <p class="error-msg" *ngIf="displayErrors" name="errorMsg">
            {{'RequiredField' | translate}}</p>
    </span>

However, instead of having a dropdownlist showing all the employees returned, I get this error: 

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.webpackJsonp../node_modules/@angular/core/esm5/core.js.DefaultIterableDiffer.diff (core.js:7495)
    at NgForOf.webpackJsonp../node_modules/@angular/common/esm5/common.js.NgForOf.ngDoCheck (common.js:2583)
    at checkAndUpdateDirectiveInline (core.js:12368)
    at checkAndUpdateNodeInline (core.js:13889)
    at checkAndUpdateNode (core.js:13832)
    at debugCheckAndUpdateNode (core.js:14725)
    at debugCheckDirectivesFn (core.js:14666)
    at Object.eval [as updateDirectives] (TransactionPortalComponent.html:23)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14651)
    at checkAndUpdateView (core.js:13798)

The object is an array, so I'm not sure why it says only arrays and iterables are allowed. What am I doing wrong above?

EDIT:

Response from api should look like this: 

{
    _employeeList :
    [{
        _employeeKey : ""employee1""
    },
    {
        _employeeKey : ""employee2""
    }],
   _errorDetails :
   {
        _message : ""successful"",
       _status : 200
   }
}

But I am only getting back [] array.

Could it be related to my interface? :

export interface IEmployee {
    employee: string;
}

Upvotes: 1

Views: 41

Answers (2)

edkeveked
edkeveked

Reputation: 18371

I think the way you are doing the loop is wrong, since you want to have a tag <option> for each employee.

Also, since your array might be empty, you can first check if the array contains data or not. Maybe you can consider using <ng-template> and ng-container.

With this response coming from your api, you have to make the following changes:

service

The api is returning a JSON and not an array

getEmployees(): Observable<any> {
        return this.http.get<any>(this.employeesUrl).catch(this.errorHandler);
    }

component

Get the array

ngOnInit() {
    this._employeeService.getEmployees().subscribe(data => this.employees = data._employeeList, error => this.errorMsg = error);
  }

template

Since you want to display not the object itself but its value, you can do the following:

 <ng-container *ngIf="employees?.length>0">
  <ng-template ngFor let-employee [ngForOf]="employees">
   <option>{{employee._employeeKey}}</option>
  </ng-template>
 </div>

Upvotes: 1

Austin
Austin

Reputation: 203

In your constructor you have injected your service as _employeeService, but in your ngOnInit() method you are calling this._transactionService.getEmployees(). It should be this._employeeService.getEmployees().

Upvotes: 0

Related Questions