CODEWITHSUNDEEP
angularservicecomponents
Mantas
Mantas

Reputation: 85

Service values still undefined after subscribing

I have a function that is called once a user selects a value in a form:

onChange($x: any){
  this.ApiService
      .getCarsByManufacturer($x.target.value)
      .subscribe(data => this.carListAfterManufacturerSelect = data);
  console.log(this.carListAfterManufacturerSelect)
}

The service:

getCarsByManufacturer(manufacturer: string): Observable<Cars[]>{
    return this.http.get<Cars[]>(this.apiBaseUrl + '/cars/spec/' + manufacturer)
  }

I want to use the user's selected value as a parameter for my function but carListAfterManufacturerSelect keeps returning undefined. Any suggestions?

Upvotes: 0

Views: 32

Answers (1)

Random
Random

Reputation: 3236

Here is how subscribe works:

onChange($x: any){
  this.ApiService.getCarsByManufacturer($x.target.value).subscribe(data => {
    this.carListAfterManufacturerSelect = data;
    console.log('2. Received !', this.carListAfterManufacturerSelect); // filled
    this.codeToBeExecutedAfterHttpCallIsReceived()
  });
  console.log('1. Not received yet', this.carListAfterManufacturerSelect); // undefined
}

codeToBeExecutedAfterHttpCallIsReceived() {
  console.log('3. Received too !', this.carListAfterManufacturerSelect); // filled
  // do a lot of complex stuff with carListAfterManufacturerSelect
}

Upvotes: 1

Related Questions