Angular - Select dropdown list is blank

Question

In my Angular-12, I have this JSON response from the API endpoint:

{
  "message": "vehicle Model Detail.",
  "error": false,
  "code": 200,
  "results": {
    "vehiclemakes": [{
        "name": "Freightliner",
        "id": 15
      },
      {
        "name": "Honda",
        "id": 13
      },
      {
        "name": "Renault",
        "id": 3
      },
      {
        "name": "Suzuki",
        "id": 16
      },
      {
        "name": "Toyota",
        "id": 4,
      },
      {
        "name": "Volkswagen",
        "id": 6
      },
      {
        "name": "Volvo",
        "id": 5
      }
    ]
  }
}

Service:

public getParameters(): Observable<any> {
  return this.http.get(this.api.baseURL + 'parameters', this.httpOptions);
}

Component:

vehicles!: any[];

loadAllVehicles() {
  this.vehiclemodelService.getParameters().subscribe(
    data => {
      this.vehicles = data.results.vehicles;
    },
    error => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
    }
  );
}

ngOnInit(): void {
  this.loadAllVehicles();
}

I am to load this in a dropdown select list:

HTML:

<ng-select [items]="vehicles"
   [selectOnTab]="true"
   [searchable]="true"
   bindValue="name"
   bindLabel="make_id"
   placeholder="Select Vehicle Make"
   [multiple]="false"
   [clearable]="true"
   required
   formControlName="make_id">
</ng-select>

When I loaded the form and click on the select dropdown list, it appears that data is there but it displays nothing.

How do I get this sorted out?

Thanks

Answer 1

Because this.vehicles is filled asyncronously, that's how .subscribe() works. When your ng-select is rendered, this.vehicles does not contains your api response.

A simple way to handle this :

html :

<ng-select [items]="vehicles$ | async"
     [selectOnTab]="true"
     [searchable]="true"
     bindValue="name"
     bindLabel="make_id"
     placeholder="Select Vehicle Make"
     [multiple]="false"
     [clearable]="true"
     required
     formControlName="make_id">
</ng-select>

ts :

vehicles$!: Observable<any[]>;

loadAllVehicles() {
  this.vehicles$ = this.vehiclemodelService.getParameters().pipe(
    map(data => data.results.vehicles)
    catchError(() => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
      return of(null);
   }),
  );
}

ngOnInit(): void {
  this.loadAllVehicles();
}

Answer 2

In you sample data, the property is called results.vehiclemakes, and when you are assigning value to this.vehicles , you used results.vehicles. So, just change that to:

this.vehicles = data.results.vehiclemakes;