This particular issue may seem quite basic, but I find myself needing assistance in the scenario that follows. Initially, my intention is to utilize the balance value from the Fix interface within a single array; subsequently incorporating it into the data for chart.js and using the name value as the label.
I have already constructed the interface and a component for this purpose.
You might notice (and I can almost picture you banging your heads against the wall) that I have written a for loop in just two lines (labels: .... and data: ....) that demonstrates my intended outcome.
export interface Fix {
name?: String,
balance?: number
}
import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';
import { Fix } from '../fix';
@Component({
selector: 'app-container',
templateUrl: './container.component.html',
styleUrls: ['./container.component.scss']
})
export class ContainerComponent implements OnInit {
public chart: Chart;
public fix: Fix[];
constructor() {
this.fix = [
{'name': 'Fix1', 'balance': 123},
{'name': 'Fix2', 'balance': 23}
]
}
ngOnInit() {
this.chart = new Chart('chart', {
type: 'doughnut',
data: {
labels: [for (let bal of this.fix) {bal.name}],
datasets: [{
label: '# of Votes',
data: [for (let bal of this.fix) {bal.balance}]
}]
}
});
}
}
It is true that I could iterate through a loop like:
for (let x if this.fix) {
labelsArray.push(x.name);
fixArray.push(x.balance);
}
and then use this method for my chart.js implementation. However, this leads me to the next challenge. In the future, instead of defining "fix" within the constructor, the object will be generated by a child component. Whenever the values are altered, the chart must update accordingly.