Guide to dynamically loading mat-options with values retrieved from an API array

Question

Guide to dynamically loading mat-options with values retrieved from an API array

I seem to be facing an issue as I am unable to populate the md-option with the data retrieved from an API. It feels like there might be something missing in my code.

Below is the service.ts file where I make the API call and attempt to fetch the data:

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

This is how the API response looks like:

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

In my HTML file, it's structured 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>

The challenge lies in figuring out how to correctly fetch the elements from the API within the component.ts file in order to populate the mat-option successfully.

angular typescript angular-material md-select

Answer 1

Answer №1

Could you please test the code provided below?

To update your service.ts file, replace the following code:

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

In your component.ts file

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

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

Then 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>

Answer 2

Could you please test the code provided below?

To update your service.ts file, replace the following code:

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

In your component.ts file

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

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

Then 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>

Answer 3

Answer №2

you have the potential to achieve it in this manner

construct a class named Vehicle

export class Vehicle {
 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;
 }
}

proceed by importing the class into your service and utilizing it.

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

Answer 4

you have the potential to achieve it in this manner

construct a class named Vehicle

export class Vehicle {
 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;
 }
}

proceed by importing the class into your service and utilizing it.

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

Answer 5

Answer №3

After reviewing the responses above, I believe there is a more efficient approach. Here's my suggestion:

Start by creating a new interface in your models: 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;
      })
     }

}

Include the following code 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>

Answer 6

After reviewing the responses above, I believe there is a more efficient approach. Here's my suggestion:

Start by creating a new interface in your models: 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;
      })
     }

}

Include the following code 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>

Guide to dynamically loading mat-options with values retrieved from an API array

Answer №1

Answer №2

Answer №3

Similar questions

Component not appearing in Storybook during rendering

Tips for retrieving a date and time selection from a mat-date-picker and mat select?

Post-Angular migration (going from version 12 to 14), there are still lingering security risks associated with the "d3-color vulnerable to ReDoS" issue

Update the event listeners for child components

Can you share the appropriate tsconfig.json configuration for a service worker implementation?

What are the distinctions between manually and programmatically changing URLs in Angular 6?

Determine which rows have the checkbox enabled and showcase them in a separate table using Angular

Guide on linking numerous RX observables and serving as a unified function

Having trouble getting Angular Material's mat-autocomplete to function properly when the application is in

What is the rationale behind Typescript permitting the assignment of an "any" object type to a class object?

Restrict the keys to only properties that have an array data type

What strategies can be used to prevent circular dependencies within components?

Determining the height of dynamically rendered child elements in a React application

Using async/await with mysql2 in Node.js can lead to undefined rows and fields

Resetting a Template-Driven form in Angular using programming techniques

Ways to link information from one entity to another

Is there a way to retrieve the requested data in useEffect when using next.js?

Omit the timezone details when initializing a new Date object in Angular

Issue with the dropdown functionality in an Angular reactive form

Commence the list from the lowest point