[Chartjs]-How to use async data for use with chart.js in ionic

by

0👍

✅

Not sure when/where you’re calling the useAnotherOneWithWebpack() method but one issue from your code is that you’re assigning some values to the local constant datelabel but not to the property from the component:

// The following line just creates a local const available only in that scope
const datelabel = this.data1.result[1].date;

Instead, you should be initializing the component’s property:

this.datelabel = this.data1.result[1].date;

Keeping that in mind, please try the following:

async getData() {

  const loading = await this.loadingController.create({
    message: 'Loading'
  });

  await loading.present();

  this.api.getData().subscribe(
    res => {

      // This line will be executed when getData finishes with a success response
      console.log('Inside of the subscribe - success');

      console.log(res);

      this.data1 = res[0];
      this.datelabel = this.data1.result[1].date;

      // Now that the data is ready, you can build the chart
      this.useAnotherOneWithWebpack();

      loading.dismiss();

    }, 
    err => {

      // This line will be executed when getData finishes with an error response
      console.log('Inside of the subscribe - error');

      console.log(err);

      loading.dismiss();
    }); 


  // This line will be executed without waiting for the getData async method to be finished
  console.log('Outside of the subscribe');

}

Leave a comment