Angular - Select dropdown list is blank

user_11352561 0
Viewed 399

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

angular12 angular-ngselect angular typescript
3 Answers

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();
}
user_120404270

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;
user_143898300

Issues

  1. As @Nenad mentioned, results.vehicles is not valid in your JSON. You have to use results.vehiclemakes.

  2. make_id is not valid in the object of vehiclemakes. Meanwhile, bindLabel property is used to display the label, while bindValue is used for value. With existing code, the generated options will display id as label with the name as value.

<ng-select bindValue="name"
     bindLabel="make_id">
</ng-select>

Solution

  1. Assign vehicles with data.results.vehiclemakes.
  2. Set bindLabel with name and bindValue with id.

.component.ts

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

.component.html

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

Sample Solution on StackBlitz

user_80176900
Related