I am dealing with categories and dishes. Each dish is associated with a specific category.
My goal is to send an http request to retrieve all the dishes belonging to a particular category. This will result in an array like:
{
Soup[{'Name','Description', 'Price'..}, ..],
Chicken[{'Name','Description',..}], ...
}
This array contains all soups grouped together, as well as all chickens in another group. I have dynamically created segments for each category using:
<ion-segment [(ngModel)]="relationship" color="primary">
<ion-segment-button *ngFor ="let category of categories" value="{{category.Name}}">
{{category.Name}} ({{category.Listings}})
</ion-segment-button>
</ion-segment>
Now, my challenge lies in populating these segments based on the type of category. For example, the soup segment should display all soups, while the chicken segment should show all chickens, and so on.
Here is what I have attempted thus far:
<div [ngSwitch]="relationship" *ngFor = "let category of categories">
<ion-list *ngSwitchCase="category.Name" ngSelected="selected">
<ion-item *ngFor = "let dish of Dishes">
<h2> {{dish.Name}}</h2>
</ion-item>
</ion-list>
</div>
What I am trying to achieve is to iterate through the Dishes array based on the category and extract every dish.Name that belongs to that specific category.
Currently, I have set Dishes as data.data.Soup, which means all segments are populated only with soups.