Firstly, within the ngOnInit function, I populate the items array:
id: string = '';
items: Item[] = [];
ngOnInit(): void {
this.id = this.activatedRoute.snapshot.params['id'];
this.itemService.getItems(this.id).subscribe({
next: (res) => this.items = res
})
After successfully retrieving the items array, I can then utilize *ngFor = "let item of items" to display a list of {{item.color}} on the HTML page. At this point, the items array is populated.
My next task is to extract each item's color and store it in a separate array. To accomplish this, I amend the ngOnInit method as follows:
let colorArray:string[] = [];
for (let item of this.items) {
colorArray.push(item.color)
}
Additionally, within the same ngOnInit function, I add a console log statement:
console.log(colorArray);
However, upon execution, an empty array is logged to the console. What could have caused this issue?