I have a restaurant menu, which I want to filter based on a user's dietary requirements, so that they only see items which include none of their allergens or all those allergens can be removed if the chef modifies the dish.
I have an API giving me a list of restaurant menu items (objects) - see image attached.
If a menu item from the API contains a given allergen, the object includes a key named after the allergen populated with either 'y', or '[modification description]', where [modification description] is a text string. If it does not contain a given allergen, there is no key for it.
The variable 'selected-allergen' is an array of user selected allergens. e.g. ["gluten", "milk"].
I created menu-item as a component, which repeats over items from the API to display the restaurant's menu.
I want to:
A - filter menu items from the API:
Does the menu item from the API contain any keys that match the 'selected-allergen' items?
If true, is the value of any of these keys "y"?
If true, exclude the menu item
Else, include the menu item (in this case, the item would have a [modification description] under one or more 'selected-allergen' keys)
Else, include the menu item
B - display a list of modification descriptions for each menu-item:
Display a list of any [modification description]s under keys that match the 'selected-allergen' items
I am really stuck on how to achieve the filter in A, because so far I have only learned how to create a formula based on the end value and for a given key in an object. In this scenario, I need to check if the key is present and then potentially evaluate multiple keys.
I'm not sure if I will be able to figure out B when A is in place. But I'm guessing it would be some sort of repeat-item over the keys that match 'selected-allergen'.
Any advice would be greatly appreciated 🙏
@adzar
.jpeg/public)