How to populate mat-option with elements from an array received from api

Question

I have an issue and i think im missing something because i cant populate the md-option with the elements received from an API.

Here is the service.ts where i make the call and i try to retrieve the data from the API.

getCars(){
 this.http.get(this.rootURL+'/car/getallcars')
 .toPromise()
 .then(res => this.carList = res as Cars[]);
}

Basically the api returns something like this:

{
"id": "b49981fc-730e-49fc-b5e4-0159f4b42c9d",
"brand": "Mercedes",
"model": "G-Klasse",
"mileage": 19000,
"isAvailable": true
}

In the html i have like this:

<mat-form-field appearance="fill">
<mat-label>Field</mat-label>
<mat-select name="myField"  #brand="ngModel [(ngModel)]="service.formData.brand">
<mat-option *ngFor ="let car of carList" [value]="car.id" >{{car.brand}}</mat-option>
</mat-select>

Here comes the issue.. I dont know how should i write in the component.ts to take the elements from API and populate this mat-option.

Hello you mean you don't know how to get the data from API right? — Aman Gojariya, Mar 17 '21 at 18:32
The data from the API i think i get in service.ts. What i need to do is to get the data from the api into an array of 'Car' type and after that to populate the mat-option with the elements from that array. — Andrei Mihai, Mar 17 '21 at 18:41

score 0 · Answer 1 · answered Mar 17 '21 at 19:14

you can do it that way

create a class Car

export class Car {
 id: string,
 brand: string, 
 model: string,
 mileage: number,
 isAvailable: boolean
 constructor(data) {
    this.id = data.id;
    this.brand = data.brand;
    this.model =  data.model;
    this.mileage = data.number;
    this.isAvailable = data.isAvailable;
 }
}

then import class in your service and use it.

getCars(){
 this.http.get(this.rootURL+'/car/getallcars')
 .toPromise()
 .then(res => {
     this.carList = res.data.map(car => new Car(car))
  });
}

score 0 · Accepted Answer · answered Mar 17 '21 at 19:34

Can you please try with below code?

in your service.ts file replace below code

getCars(){
  return this.http.get(this.rootURL+'/car/getallcars');
}

In your component.ts file

ngOnInit() {
    if (!this.service.formData) {
        this.resetForm();
    }
    this.getCarsData();
}

cars: any = [];
getCarsData(): void{
    this.service.getCars().subscribe(data => {
       console.log(data);
       this.cars = data;
    });
}

In your component.html file

<mat-label>Field</mat-label>
<mat-select name="myField"  #brand="ngModel [(ngModel)]="service.formData.brand">
  <mat-option *ngFor ="let car of cars" [value]="car.id" >{{car.brand}}</mat-option>
</mat-select>

Is working! Thank you so much for your effort!! – Andrei Mihai Mar 17 '21 at 19:35 — Andrei Mihai, Mar 17 '21 at 19:35

score 0 · Answer 3 · answered Mar 19 '21 at 03:43

I read your answers above and I feel that can be a better way, here my opinion:

In your models create a new interface: car.ts

export interface Car{
 id: string,
 brand: string, 
 model: string,
 mileage: number,
 isAvailable: boolean
}

service.ts:

getCars(): Observable<Car[]> {
  return this.http.get(this.rootURL+'/car/getallcars');
}

component.ts:

import { Car} from 'src/app/shared/model/car';
import { CarService } from 'src/app/shared/service/car.service.ts';

export class CarComponent implements OnInit {
 

    cars: Car[];
    selected: string;

    constructor(private carservice: CarService) { }  

    ngOnInit(): void {
       this.carService.getCars().subscribe(data => {
         this.cars = data;
      })
     }

}

In your template

<mat-form-field appearance="fill">
<mat-label>Field</mat-label>
<mat-select name="myField"  #brand="ngModel [(ngModel)]="selected">
<mat-option *ngFor ="let car of cars" [value]="car.id" >{{car.brand}}</mat-option>
</mat-select>

How to populate mat-option with elements from an array received from api

3 Answers3