Why Angular function does not wait for the data load for HighChart?

Question

Below is the code, I have tried async/ await too but doesn't work as expected, I always get undefined values in this.totalTwoChartData in getCharts() function? I could expect null value but not undefined.. Should I cover all in one function only? or promise is the best way? what is the best practice to write the clean code and handle these types of situations?

ngOnInit(): void {
    this.getAllChartData()
  }

  // Get all chart data
  getAllChartData() {
    // Do not call server api if callStartDate / callEndDates is null
    if (this.calStartDate !== null && this.calEndDate !== null) {
      this.getOneChartData();
      this.getTwoChartData();
      this.getThreeChartData();
      this.getCharts();
    }
  }

  // One chart data
  getOneChartData() {
    this.oneChartSubscription = this.chartService
      .getOneChartService(this.calStartDate, this.calEndDate)
      .pipe(filter((res) => res !== null))
      .subscribe((response) => {
        this.totalOneChartData = response.data
      })
  }

  // Two chart data
  async getTwoChartData() {
    this.twoChartSubscription = this.chartService
      .getTwoChartService(this.calStartDate, this.calEndDate)
      .pipe(filter((res) => res !== null))
      .subscribe((response) => {
        this.totalTwoChartData = response.data
      })
  }

  // Three chart data
  getThreeChartData() {
    this.threeChartSubscription = this.chartService
      .getThreeChartService(this.calStartDate, this.calEndDate)
      .pipe(filter((res) => res !== null))
      .subscribe((response) => {
        this.totalThreeChartData = response.data
      })
  }


  async getCharts() {
    // Load Two chart data
    if (await this.totalTwoChartData !== null) {
      var objOneChart = await this.totalOneChartData;
      this.arrOneName = Object.keys(objOneChart).map((k) => {
        return objOneChart[k]['Name'];
      });

      this.arrOneAmt = Object.keys(objOneChart).map((k) => {
        return parseFloat(objOneChart[k]['receivedAmount']);
      })....

You clearly misunderstood the concept of the [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) operator. If you use it on values that are no promises, it will **not** wait until the value is set, instead a Promise will be created resolving immediately with the current value. — JSON Derulo, May 18 '22 at 10:07
@JSONDerulo I may be wrong.. but If you see I have used async getTwoChartData() and then used await .. observables then subscribe itself return promise too.. — Raj, May 18 '22 at 11:01
First, you don't await the function, but the `this.totalTwoChartData` property. Second, an async function with an observable inside doesn't magically wait for the Observable to complete. It is possible to do implement it, e.g. with `toPromise()`, but your code doesn't, and it's not recommended. — JSON Derulo, May 18 '22 at 11:15
@JSONDerulo, Now I understood why my code was not working! Thanks a lot. — Raj, May 18 '22 at 11:27

ruth · Accepted Answer · 2022-05-18T11:20:10.910

This is a use-case for the forkJoin function (or combineLatest or zip based on the use-case) to trigger all the observables in parallel and proceed when they have emitted.

See here for more info.

If you're again trying to use the variables this.arrOneName and this.arrOneAmt synchronously somewhere else in the controller (*.ts file), then you'd need to essentially move the subscription to that place. As a rule of thumb, subscribe to the observables where it's emissions are needed.

getCharts() {
  forkJoin({
    oneChartData: this.chartService.getOneChartService(this.calStartDate, this.calEndDate).pipe(filter(res => !!res)),
    twoChartData: this.chartService.getTwoChartService(this.calStartDate, this.calEndDate).pipe(filter(res => !!res)),
    threeChartData: this.chartService.getThreeChartService(this.calStartDate, this.calEndDate).pipe(filter(res => !!res)),
  }).subscribe({
    next: (data: any) => {
      this.arrOneName = Object.keys(data.oneChartData).map((k) => objOneChart[k]['Name']);
      this.arrOneAmt = Object.keys(data.oneChartData).map((k) => parseFloat(objOneChart[k]['receivedAmount']));
      },
    error: (error: any) => {
      // handle error
    }
  });
}

Great solution! Just to add, it's in general a bad idea to mix Observables with Promises, and one should stick to either one of them. — JSON Derulo, May 18 '22 at 10:25
Working like a charm! Just one question @ruth is it ok if we do not use return when after map? — Raj, May 18 '22 at 10:41
@Raj: The statements `map((k) => objOneChart[k]['Name'])` is equivalent to `map((k) => { return objOneChart[k]['Name']; })`. So when the statements are enclosed in parentheses, `return` needs to be stated explicitly. For single line statements, the return value of that statement is returned to the arrow function. — ruth, May 18 '22 at 11:19

Why Angular function does not wait for the data load for HighChart?

1 Answers1