CODEWITHSUNDEEP
angulartypescriptangular12angular-ngselect
user11352561
user11352561

Reputation: 2637

Angular - Select dropdown list is blank

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

Upvotes: 2

Views: 1252

Answers (3)

Yong Shun
Yong Shun

Reputation: 51125

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

Upvotes: 1

NeNaD
NeNaD

Reputation: 20304

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;

Upvotes: 1

Gauthier Tassin
Gauthier Tassin

Reputation: 606

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

Upvotes: 3

Related Questions