I have been using an API to retrieve data and display it on a webpage. While I am able to see the response in the console, I am facing difficulty binding the data to the user interface. Nothing is appearing on the screen as expected.
This is my HTML code:
<ul *ngFor="let item of items; let i = index">
<li class="fa fa-plus">{{item.name}} - {{i}}</li>
</ul>
And this is my TypeScript code:
id: number;
name:string;
imageUrl: string;
items:any = {};
ngOnInit() {
this.getItems();
}
getItems() {
this.getItemsService.getItems().subscribe(
res => {
console.log(res)
if (res.Success) {
this.items = res;
}
}
)
}
I have defined the 'items' variable as an object because I am trying to fetch data from an array of objects. Even when I tried defining it as an array, I still face the same issue of not being able to bind data to the HTML.
This is the link to the API I am using:
If you need any more information or have questions, please feel free to ask. I would greatly appreciate any help with binding this data effectively.