Here is the HTML code that I am currently working with:
<div *ngIf="chart" class="col-xl-4 col-lg-6">
<div class="card cardColor mb-3">
<div class="card-header headColor">
<img class="img-fluid" src="../../../assets/images/chart-bars-box-16-white.png" />
<b>Issue Chart</b>
</div>
<div class="card-body">
<canvas id="canvas">{{ chart }}</canvas>
</div>
</div>
</div>
I am using an API to fetch data from this URL:
url = 'https://api.myjson.com/bins/1dnpid';
The following code snippet is for creating a line graph:
// line graph
this.httpClient.get(this.url).subscribe((res: Data[]) => {
res.forEach(y => {
this.year.push(y.year);
this.price.push(y.price);
});
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: this.year,
datasets: [
{
data: this.price,
borderColor: '#6ea204',
fill: false
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}],
}
}
});
});
In order to manage the data, I have created the following interface:
export interface Data {
year: String;
price: number;
}
When running this code in a browser, I encounter the following error message:
ERROR TypeError: res.forEach is not a function at SafeSubscriber._next (dashboard.component.ts:130)
What could be causing this issue?