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