Jhipster : data loading may be too slow

Question

I have some trouble making my chart work. I'm a creating a chart using ng2-charts. I load my datas using a service, then i display them into a chart. The problem is, datas are correctly displayed only if I add an alert() between the moment where i'm taking the datas from my service, and the moment where I set the chart datas.

lightData: LightData[];
public lineChartData = Array<any>();
public lineChartLabels = Array<any>();

ngOnInit() {
    this.lightData = []; // Array is empty
    this.loadAll(); // Load all the datas
    this.setChartData() // Set datas of my chart
}

loadAll() {
    this.lightDataService.query().subscribe(
        (res: Response) => this.onSuccess(res.json(), res.headers),
        (res: Response) => this.onError(res.json())
    );
}

public setChartData(){
    for(let i =0; i< this.lightData.length; i++)
    {
        this.lineChartLabels.push(this.lightData[i].id);
        this.lineChartData.push(this.lightData[i].value);
    }
}

private onSuccess(data, headers) {
    for (let i = 0; i < data.length; i++) {
        this.lightData.push(data[i]);
    }
}

private onError(error) {
    this.alertService.error(error.message, null, null);
}

This code doesn't work, chart is empty, but, if I add an alert like this :

ngOnInit() {
    this.lightData = []; // Array is empty
    this.loadAll(); // Load all the datas
    alert("blabla"); // alert to wait
    this.setChartData() // Set datas of my chart
}

It works !

I already had this problem before for other function and I never knew how to fix it.

Edit 1 : Trying to put the setChartData call into the load all asynchronous method :

lightData: LightData[];
public lineChartData = Array<any>();
public lineChartLabels = Array<any>();

ngOnInit() {
    this.lightData = []; // Array is empty
    this.loadAll(); // Load all the datas

}

loadAll() {
   this.lightDataService.query().subscribe(
   (res: Response) => {
      this.onSuccess(res.json(), res.headers);
      this.setChartData();
      },
   (res: Response) => this.onError(res.json())
   );
 }

public setChartData(){
  for(let i =0; i< this.lightData.length; i++)
  {
    this.lineChartLabels.push(this.lightData[i].id);
    this.lineChartData.push(this.lightData[i].value);
  }
}

private onSuccess(data, headers) {
    for (let i = 0; i < data.length; i++) {
        this.lightData.push(data[i]);
    }
}
private onError(error) {
    this.alertService.error(error.message, null, null);
}

Still not working.

Answer 1

The loading of the data is done asynchronously, your code does not stop and wait until it is loaded. The way you are doing things now the order of the execution is.

 this.loadAll(); // starts the request
 this.setChartData(); // set the empty list as data
 this.onSuccess(res.json(), res.headers); // later the request finishes

What you need to do is set the chart data after the data has been received. You can do it by calling setChartData inside the success handler of the request.

loadAll() {
  this.lightDataService.query().subscribe(
    (res: Response) => {
      this.onSuccess(res.json(), res.headers);
      this.setChartData();
    },
    (res: Response) => this.onError(res.json())
  );
}