Issue
I try to get the zero index of the array, but I am getting undefined value and I can't bind the value in html using ngFor:
categories: Category[] = [];
getSubItems(): void {
this.http
.get<Category[]>('https://www.themealdb.com/api/json/v1/1/categories.php')
.subscribe((data) => {
this.categories = data;
console.log(this.categories[0]);
});
}
HTML
<div class="food-item" *ngFor="let art of categories">
<img class="card-img-top" style="max-width:300px;" role="button">
<h1>{{art.strCategory}}</h1>
</div>
Here I am trying to console log the zero index of that array but I'm getting undefined. However, when I console log this.categories
I am getting the data.
Solution
It seems your problem is fixed doing this:
getSubItems(): void {
this.http
.get<{categories: Category[]}>('https://www.themealdb.com/api/json/v1/1/categories.php')
.subscribe((data) => {
this.categories = data?.categories;
console.log(this.categories[0]);
});
}
Answered By - Luca Angrisani
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.