0

I am trying to display a graph with the sum of the values of the flow of different pumps that I displayed individually in Angular using typescript. To do that I retrieve the data that I need in an array of objects that I called data2Display that is structured as follows

var data2Display=[{
  chart: ChartResource,
  data: [LineData],
}]

ChartResource = {
title,
xAxisTitle,
yAxisTitle
}

LineData= {
x,// an array of dates
y,//an array of numbers
}

I am filling this array with the data I retrieve from a database with functions that I call like this :

this.myFunctionGetData(id).then((val) => {
if(val.length > 0){
this.chartResource = new ChartResource();
this.chartResource.xAxisTitle = "DATE";
this.chartResource.title = " Scenario transfer";
this.chartResource.yAxisTitle = "unit"
this.addStepsToGraph(val);//this is were this.lineDatas gets its values
var temp = { chart: this.chartResource, data: this.lineDatas }
this.data2Display.push(temp);
transferCount.push({val:true, idx:index});//to know what type of pump it is
// in the else the val value is false
} else {
//here we get some default value
}
}). catch(err){
console.log(err)
}

These functions are in a foreach loop because I have graphs for several pumps.

I call my function to calculate the total sum after the call of the other functions like this :

//I check if we are in the last pump in the foreach
if(index+1===pump.length && (emitCount.length >= 1 || transferCount.length >= 1 || transfer2ReceiverCount.length >= 1)){
emitCount.map((count) => {
   if(count.val===true){
//call for my function with the data to be summed and the pump information
       return this.totalGraphSum(this.data2Display, pump[count.idx])
 }
});
//...the code above is repeated for the other count variables
 });
}

My problem is that when I call my function to calculate the total sum of the graph, the final array is not always with all the values that I need.

When I use console.log to display the length of the array, when the total sum is not what it's supposed to be, the length of the array is inferior as the array displayed in the console.

But I've seen on here, that is because when the log is first displayed the final value is not known yet.

For example if I have four graphs to sum together, I'm expecting data2Display.length to be 4, but when my problem occurs, the length is usually equal to 2.

I have tried to call my function inside the functions getting the data but it doesn't help. I've tried calling the function that get the data one inside the other, but then I can't display the data.

How can I wait for the value of this array to have all the data before I call my function to sum the values of the graphs ?

Thank you.

  • Apparently at least one of these functions is asynchronous (`myFunctionGetData` appears to return a promise and is likely the culprit). You have to wait for that to finish before doing anything with the data it returns. If you call it more than once, you have to wait for all calls to return. – Heretic Monkey Aug 20 '21 at 17:32

0 Answers0