ketchup | Pomodoro timer in React | Frontend Framework library

You're treating the mealObj as an array while it's an object and also you're not looping, so your code only runs once.

Below you can find a code that works for the first Menu (Steak). You might need to account for multiple meals by creating multiple tables.

I think this may be what you are looking for... Though you mention not parsing ingredients that are listed twice, though each food, only has an ingredient listed in your object once. Correct me if I am wrong I will refine answer.

You can use for/in loops to get the nested ingredients and their foods. Then use the obj.name to get the name. Through the first for/in loop the key -> i will be the name of the food, then use the second key along witht he first to get the actual .name => obj[i][k].name this will give you the ingredient name.

I also created a couple of divs to palce the food and its buttons wrapped in divs for styling, etc...

You can use conditionals to filter by food if you want to only show a certain type of foods ingredients as buttons.

NOTE: your obj key for the first value is uppercase, this will cause issues when parsing obj[index][key].name, likely that is just a typo...

You are setting the ingredients state as a string, so you are basically 'stringify' a string which will result in JSON SyntaxError. If you want to send an array that way you must specify the array bracket [ and ] in order to make it a valid array.

To solve it just change:

Add these links in head part on index.html

Make sure you are using item.lower() and not item.lower. I would also use a dictionary, where the key is the name of the aisle, and the value is a list of items in that aisle.

Okay, buckle up, this is going to be a bit of ride.

One of the most powerful concepts you have available to you is the concept of "model". A model is just something that "models" something and is a way to seperate different areas of your program. So a model, models the data (think of it like a container) and the view will then use those models to format the data to the user (separation of concerns). A model may also contain business logic or perform calculations depending on its requirements.

The allows you to centralise concepts so you don't end up repeating yourself or forgetting to do things. It's also a way to change how parts of the program work, also known as "delegation"

Well, that's a lot of "blah", so let's get started. I prefer to use interfaces to describe things, it provides a lot of freedom, as you can put different interfaces together to suit different requirements.

Okay, simple concept, this will be a list of items which are available to sell

You can use findIndex method to find existing product Name.

You don't have any problem: It's working here:

Try to set the function like this (inside script tag):

You may not reference the css link. You can refer to the following example.