1
00:00:00,150 --> 00:00:06,780
OK, so it's time to make our list and dynamic now before we start typing away and let me just mention

2
00:00:06,990 --> 00:00:11,730
that we're going to do that using the set data structure.

3
00:00:12,030 --> 00:00:19,950
But since it is JavaScript topic, exclusive JavaScript topic, I'm not going to go in huge detail.

4
00:00:20,160 --> 00:00:22,650
Basically, I'll show you I'll tell you what happens.

5
00:00:22,890 --> 00:00:30,090
But if you're interested in learning more, just navigate to my playlist, JavaScript Nuggets and then

6
00:00:30,090 --> 00:00:33,840
look for unique values, ESX video.

7
00:00:34,050 --> 00:00:42,450
And here, of course, I go into greater detail what is happening as far as the code of getting unique

8
00:00:42,570 --> 00:00:43,080
values.

9
00:00:43,230 --> 00:00:46,860
So let's start working on our categories.

10
00:00:47,280 --> 00:00:51,750
And more specifically, I would want to navigate back to objects.

11
00:00:52,560 --> 00:00:59,670
And then in the app Jaris, I would want to filter the categories, but I also would want to get only

12
00:00:59,670 --> 00:01:00,390
the unique ones.

13
00:01:00,780 --> 00:01:10,920
So that way, if my list changes, I will always have this value for my categories that will filter

14
00:01:10,920 --> 00:01:13,480
out only the unique categories.

15
00:01:13,740 --> 00:01:21,900
So if a month or day later I add some additional category, for example, Denner, it will also show

16
00:01:21,900 --> 00:01:24,240
up in my categories list.

17
00:01:24,690 --> 00:01:30,430
And then of course it will also show up as far as the buttons are concerned.

18
00:01:30,780 --> 00:01:34,830
So we have these categories, which at the moment is just an empty array.

19
00:01:35,160 --> 00:01:43,080
So now above the component, I would want to set up the functionality where I only get the unique category

20
00:01:43,260 --> 00:01:44,190
from my list.

21
00:01:44,400 --> 00:01:47,630
So I'm going to call them all categories.

22
00:01:47,630 --> 00:01:53,880
So all categories like so and that is equal to my items.

23
00:01:54,150 --> 00:01:58,790
And of course I would want a map or some say item map online.

24
00:01:58,800 --> 00:02:02,520
What we're looking for is that category property.

25
00:02:02,640 --> 00:02:03,060
Correct.

26
00:02:03,240 --> 00:02:10,530
So now we just want to get all the values that I have in the category property, whether at a shake,

27
00:02:10,530 --> 00:02:14,760
whether that is launch and whatever else we had or do.

28
00:02:15,090 --> 00:02:16,680
So we have items map.

29
00:02:17,530 --> 00:02:24,160
Then I'll call this item and I'll just say that, you know, as I'm iterating over my list, please

30
00:02:24,160 --> 00:02:26,940
return to value for the category.

31
00:02:27,250 --> 00:02:38,260
And if you council log all categories like so you'll notice that in my council I should see all the

32
00:02:38,260 --> 00:02:39,520
values for the category.

33
00:02:39,880 --> 00:02:46,870
Now, of course, I have a of nine items, so I have breakfast, lunch, Shaikh's breakfast, lunch,

34
00:02:46,870 --> 00:02:49,330
Shaikh's breakfast, lunch and drinks.

35
00:02:49,840 --> 00:02:51,530
So that all is good.

36
00:02:52,000 --> 00:02:55,720
Problem is, of course, that we have repeating Mauer's.

37
00:02:56,140 --> 00:02:58,660
So I don't want three buttons for breakfast.

38
00:02:59,470 --> 00:03:05,860
I only want one button for breakfast, so if there are some repeating rumors, I only would want to

39
00:03:05,860 --> 00:03:06,730
get the first one.

40
00:03:07,000 --> 00:03:12,460
So I only would want if there was a unique values, which in my case should be three.

41
00:03:12,850 --> 00:03:13,330
Correct.

42
00:03:13,720 --> 00:03:19,490
So how we can do that while this is where they set their structure comes into play.

43
00:03:20,290 --> 00:03:27,370
So essentially I can do something like this where I say, you know what, get me a new set and then

44
00:03:27,430 --> 00:03:28,240
pass it in.

45
00:03:28,690 --> 00:03:36,850
Because what's really cool about the set is the fact that it only gets the unique values and not my

46
00:03:36,850 --> 00:03:37,420
apologies.

47
00:03:37,440 --> 00:03:41,790
I deleted the console log categories.

48
00:03:42,620 --> 00:03:46,510
OK, so what you're saying now is should get only the unique.

49
00:03:47,250 --> 00:03:53,830
Now, the problem is that I would want to add all because of course, there also should be a button

50
00:03:53,830 --> 00:03:54,330
for all.

51
00:03:54,790 --> 00:03:58,150
And I also want it as an array at the moment.

52
00:03:58,150 --> 00:04:00,180
As you can see, it is an object.

53
00:04:00,430 --> 00:04:06,940
So this is where we use this product, where I say there's going to be a new array, so all categories

54
00:04:06,940 --> 00:04:08,350
are going to be equal to zero.

55
00:04:08,680 --> 00:04:10,930
And then the first item will be all.

56
00:04:11,320 --> 00:04:19,810
And one, I'll just use this print operator and spread out my set data structure like so so cut it out,

57
00:04:19,960 --> 00:04:23,440
copy and paste, remove the semicolon.

58
00:04:23,680 --> 00:04:33,070
And what you should see as far as all categories is an array of four items like So and line.

59
00:04:33,070 --> 00:04:38,460
Each item just represents that unique category from my list.

60
00:04:38,860 --> 00:04:43,630
And at this point what we can do is just pass it as our state value.

61
00:04:44,410 --> 00:04:50,380
So notice we have categories and of course that is the state values from now instead of empty array,

62
00:04:50,740 --> 00:04:58,710
I pass it in all categories and now I just need to get those categories down to my categories component.

63
00:04:59,080 --> 00:05:06,400
So here I go with categories is equal to my categories, state value and inside of the categories.

64
00:05:06,400 --> 00:05:12,130
Of course we would need to structure that categories like so and then comma.

65
00:05:12,490 --> 00:05:21,970
And instead of manually adding those buttons, what I would want is to iterate over my categories and

66
00:05:21,970 --> 00:05:28,930
then for each category, display this button and of course also serve the functionality where I grab

67
00:05:28,930 --> 00:05:33,910
the value, the text value from the category and add it to my filter items.

68
00:05:34,720 --> 00:05:39,820
So I'll remove my manuell buttons and say categories map.

69
00:05:40,060 --> 00:05:45,880
So we're mapping over and for each item I would want to return a button sern here.

70
00:05:45,880 --> 00:05:51,820
I'll call this category that will represent each and every string that I have in my array.

71
00:05:52,060 --> 00:05:58,150
And then also since I have a list, I'm just going to go with index here because we have a simple list

72
00:05:58,150 --> 00:05:58,750
on this case.

73
00:05:58,750 --> 00:06:00,850
We can use the index.

74
00:06:01,190 --> 00:06:06,220
So here I go, we return, then I'm returning a button.

75
00:06:06,730 --> 00:06:13,320
And as far as the value for the button while I'm going to go type, so that is going to be equal to

76
00:06:13,330 --> 00:06:13,810
a button.

77
00:06:14,050 --> 00:06:20,590
Now, for all the buttons, I would also want to add a class name and I'll call this filter button.

78
00:06:20,770 --> 00:06:24,970
And remember, we have a list of things, so we go with key.

79
00:06:25,270 --> 00:06:28,780
And that key, of course, is going to be equal to my index.

80
00:06:29,070 --> 00:06:32,560
And lastly, I would want to pass in the category.

81
00:06:33,680 --> 00:06:40,660
And also set up the unclick, so here I say, yeah, whatever is the string value than past it.

82
00:06:40,670 --> 00:06:47,620
And as far as the text for the button, um, inside of the clock, of course, I would want to run filter

83
00:06:47,630 --> 00:06:50,020
items and then again pass the category.

84
00:06:50,180 --> 00:06:57,350
So we go with unclick and then we have our on line function, we go with filter items and again we pass

85
00:06:57,350 --> 00:07:01,660
in the category whatever string is our value.

86
00:07:01,970 --> 00:07:10,250
And of course, what's really cool is that we get all the values, unique values as far as the categories

87
00:07:10,550 --> 00:07:11,620
in our list.

88
00:07:11,630 --> 00:07:16,400
And then once we click, notice how we can filter those items.

89
00:07:16,400 --> 00:07:21,380
And then if you want to display all, then of course we are displaying all the items.

90
00:07:21,620 --> 00:07:26,800
And the best thing is that now we are in sync with our data.

91
00:07:27,140 --> 00:07:36,980
And what that means is, for example, if the value changes for breakfast or early breakfast or lunch

92
00:07:37,010 --> 00:07:38,900
or we are just adding a new item.

93
00:07:39,690 --> 00:07:47,910
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

94
00:07:47,910 --> 00:07:50,220
name the same, I'll keep the image and all that the same.

95
00:07:50,220 --> 00:07:51,630
But I'll say, you know what?

96
00:07:51,870 --> 00:07:57,780
This is going to be a dinner and it's going to cost ninety nine dollars just so we can see that we have

97
00:07:57,780 --> 00:07:58,520
that unique value.

98
00:07:58,980 --> 00:08:02,700
What I could say is that I have that item in my list.

99
00:08:02,910 --> 00:08:04,620
So there it is, like you say.

100
00:08:04,830 --> 00:08:05,810
Ninety nine dollars.

101
00:08:06,180 --> 00:08:13,830
But what's also really cool that I have right away, that a dinner button that displays only the items

102
00:08:14,040 --> 00:08:16,880
that match the category of dinner.

103
00:08:17,190 --> 00:08:25,010
So that way if there are any changes in my list, it is right away represented in my app as well.

104
00:08:25,380 --> 00:08:26,520
So that's our application.

105
00:08:26,880 --> 00:08:31,740
Hopefully everyone enjoy the project and I hope to see your next project.