All language subtitles for 103 Menu - Categories Buttons (dynamic approach).en_US

OK, so it's time to make our list and dynamic now before we start typing away and let me just mention

that we're going to do that using the set data structure.

But since it is JavaScript topic, exclusive JavaScript topic, I'm not going to go in huge detail.

Basically, I'll show you I'll tell you what happens.

But if you're interested in learning more, just navigate to my playlist, JavaScript Nuggets and then

look for unique values, ESX video.

And here, of course, I go into greater detail what is happening as far as the code of getting unique

values.

So let's start working on our categories.

And more specifically, I would want to navigate back to objects.

And then in the app Jaris, I would want to filter the categories, but I also would want to get only

the unique ones.

So that way, if my list changes, I will always have this value for my categories that will filter

out only the unique categories.

So if a month or day later I add some additional category, for example, Denner, it will also show

up in my categories list.

And then of course it will also show up as far as the buttons are concerned.

So we have these categories, which at the moment is just an empty array.

So now above the component, I would want to set up the functionality where I only get the unique category

from my list.

So I'm going to call them all categories.

So all categories like so and that is equal to my items.

And of course I would want a map or some say item map online.

What we're looking for is that category property.

Correct.

So now we just want to get all the values that I have in the category property, whether at a shake,

whether that is launch and whatever else we had or do.

So we have items map.

Then I'll call this item and I'll just say that, you know, as I'm iterating over my list, please

return to value for the category.

And if you council log all categories like so you'll notice that in my council I should see all the

values for the category.

Now, of course, I have a of nine items, so I have breakfast, lunch, Shaikh's breakfast, lunch,

Shaikh's breakfast, lunch and drinks.

So that all is good.

Problem is, of course, that we have repeating Mauer's.

So I don't want three buttons for breakfast.

I only want one button for breakfast, so if there are some repeating rumors, I only would want to

get the first one.

So I only would want if there was a unique values, which in my case should be three.

Correct.

So how we can do that while this is where they set their structure comes into play.

So essentially I can do something like this where I say, you know what, get me a new set and then

pass it in.

Because what's really cool about the set is the fact that it only gets the unique values and not my

apologies.

I deleted the console log categories.

OK, so what you're saying now is should get only the unique.

Now, the problem is that I would want to add all because of course, there also should be a button

for all.

And I also want it as an array at the moment.

As you can see, it is an object.

So this is where we use this product, where I say there's going to be a new array, so all categories

are going to be equal to zero.

And then the first item will be all.

And one, I'll just use this print operator and spread out my set data structure like so so cut it out,

copy and paste, remove the semicolon.

And what you should see as far as all categories is an array of four items like So and line.

Each item just represents that unique category from my list.

And at this point what we can do is just pass it as our state value.

So notice we have categories and of course that is the state values from now instead of empty array,

I pass it in all categories and now I just need to get those categories down to my categories component.

So here I go with categories is equal to my categories, state value and inside of the categories.

Of course we would need to structure that categories like so and then comma.

And instead of manually adding those buttons, what I would want is to iterate over my categories and

then for each category, display this button and of course also serve the functionality where I grab

the value, the text value from the category and add it to my filter items.

So I'll remove my manuell buttons and say categories map.

So we're mapping over and for each item I would want to return a button sern here.

I'll call this category that will represent each and every string that I have in my array.

And then also since I have a list, I'm just going to go with index here because we have a simple list

on this case.

We can use the index.

So here I go, we return, then I'm returning a button.

And as far as the value for the button while I'm going to go type, so that is going to be equal to

a button.

Now, for all the buttons, I would also want to add a class name and I'll call this filter button.

And remember, we have a list of things, so we go with key.

And that key, of course, is going to be equal to my index.

And lastly, I would want to pass in the category.

And also set up the unclick, so here I say, yeah, whatever is the string value than past it.

And as far as the text for the button, um, inside of the clock, of course, I would want to run filter

items and then again pass the category.

So we go with unclick and then we have our on line function, we go with filter items and again we pass

in the category whatever string is our value.

And of course, what's really cool is that we get all the values, unique values as far as the categories

in our list.

And then once we click, notice how we can filter those items.

And then if you want to display all, then of course we are displaying all the items.

And the best thing is that now we are in sync with our data.

And what that means is, for example, if the value changes for breakfast or early breakfast or lunch

or we are just adding a new item.

And I think I'm going to go with a new item approach where if I add here my 10 and then I'll keep the

name the same, I'll keep the image and all that the same.

But I'll say, you know what?

This is going to be a dinner and it's going to cost ninety nine dollars just so we can see that we have

that unique value.

What I could say is that I have that item in my list.

So there it is, like you say.

Ninety nine dollars.

But what's also really cool that I have right away, that a dinner button that displays only the items

that match the category of dinner.

So that way if there are any changes in my list, it is right away represented in my app as well.

So that's our application.

Hopefully everyone enjoy the project and I hope to see your next project.