I am facing an issue where I can only access my variable inside the this.storage.get function. How can I retrieve this stored data?
Here is the content of tab2.page.html:
<ion-toolbar>
<ion-title>
Stats
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>
Bar Chart
</ion-card-header>
<ion-card-content>
<canvas #barCanvas></canvas>
</ion-card-content>
</ion-card>
</ion-content>
And here is the content of tab2.page.ts:
import { Chart } from "chart.js";
import { Storage } from '@ionic/storage';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {
constructor(public storage:Storage) {}
@ViewChild("barCanvas") barCanvas: ElementRef;
h: any;
a: any;
s: any;
e: any;
w: any;
ngOnInit() {
this.storage.get('happiness').then( (val) => {
this.h = val;
console.log(this.h, val)
})
this.storage.get('anger').then( (val) => {
this.a = val;
console.log(this.a, val)
})
this.storage.get('stress').then( (val) => {
this.s = val;
console.log(this.s, val)
})
this.storage.get('energy').then( (val) => {
this.e = val;
console.log(this.e, val)
})
this.storage.get('worry').then( (val) => {
this.w = val;
console.log(this.w, val)
})
console.log(this.h, this.a, this.s, this.e, this.w)
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: "bar",
data: {
labels: ["Happiness", "Anger", "Stress", "Energy", "Worry"],
datasets: [
{
label: "% out of 100",
data: [this.h, this.a, this.s, this.e, this.w],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)"
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)"
],
borderWidth: 2
}
]
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
stepSize: 20
}
}
]
}
}
});
}
}