angular 8 populate drop down from observable

Question

I'm new to angular and trying to populate a dropdown from an observable in Angular 8 but getting no joy. I can see the webs service is getting data as I write it to the console log but somehow is not getting displayed on the page.

I've searched the net high an wide to no avail. Any help is appreciated

error I get is: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

fetchdata.components.ts

import { Component, Inject } from '@angular/core';
import { FetchdataService } from '../fetchdata.service';
import { ServiceTypes } from '../models/servicetypes';

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {

  serviceTypes: ServiceTypes[];
  serviceType: ServiceTypes;
  isLoaded = false;

 constructor(private _testService: FetchdataService) { }

 getServiceTypes(): void {
   this._testService.getServiceTypes().subscribe(data => {
     if(data) {
       this.serviceTypes = data;
       this.isLoaded = true;
       console.log('List of Service Types', this.serviceTypes);
     }
   } );
 }

 ngOnInit() {
   // fetch all the service types
   this.getServiceTypes();
   //this.serviceType = this.serviceTypes;
 }
}

fetchdata.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ServiceTypes } from './models/servicetypes';

@Injectable({
  providedIn: 'root'
})
export class FetchdataService {

  public testURL = 'https://api.myjson.com/bins/1dfxy8';

  constructor(private _http: HttpClient) { }

    getServiceTypes(): Observable<ServiceTypes[]> {
    return this._http.get<ServiceTypes[]>(this.testURL);
    }
  }

serviceTypes.ts

export interface ServiceTypes {
    Code:string;
    Description:string;
    VolumetricRatio: string
}

fetchdata.component.html

<p>fetchdata works!</p>


<p>This component demonstrates fetching data from the server.</p>



<select>
<option *ngFor="let serviceType of serviceTypes" [value]="serviceType.code">{{serviceTypes.Description}}</option>
</select>


<ul>
  <li *ngFor="let serviceType of serviceTypes">
      {{ serviceType.Code }}
  </li>
</ul>

console log console log showing data and errors

Answer 1

As pointed out in comments, you're getting object instead of array in API response. You need to assign the target array to your variable.

Code:

this._testService.getServiceTypes().subscribe(data => {
     if(data) {
       this.serviceTypes = data.ServiceType; // <----- notice .ServiceType
       this.isLoaded = true;
       console.log('List of Service Types', this.serviceTypes);
     }
});

You should also create a new interface file for response json and use that in your service method. Something like:

export interface ServiceTypeApiModel {
    ServiceType: ServiceTypes[];
}

And then in your service method, cast the response into this model like:

getServiceTypes(): Observable<ServiceTypeApiModel> {
  return this._http.get<ServiceTypeApiModel>(this.testURL);
}