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