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

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']);
      })....

Answer

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