1 00:00:00,330 --> 00:00:00,990 Nicely done. 2 00:00:01,260 --> 00:00:10,170 And once we have the input in place next, I would want to focus on the categories now categories. 3 00:00:10,180 --> 00:00:19,250 I'll split this up into videos because four categories for the company as well as the colors, would 4 00:00:19,260 --> 00:00:27,150 want to set up the unique values and is going to be extremely similar to one of the projects we did 5 00:00:27,150 --> 00:00:31,200 at the very, very beginning, where we have the menu project. 6 00:00:31,620 --> 00:00:36,990 And remember, each item was either breakfast, lunch or Scheck's. 7 00:00:37,230 --> 00:00:40,040 And also we have this option for all. 8 00:00:40,410 --> 00:00:46,530 And if you remember in this project, we iterate over and we got back only the unique values. 9 00:00:46,530 --> 00:00:48,220 Plus we added this all. 10 00:00:48,630 --> 00:00:55,080 So this is exactly what I would want to do for categories, for company and colors. 11 00:00:55,440 --> 00:00:58,290 And that's why I set up this functionality first. 12 00:00:58,680 --> 00:01:02,340 So I'm going to navigate to my filters component. 13 00:01:03,650 --> 00:01:10,490 And here now we're getting this get unique values function from the helpers and first out, we want 14 00:01:10,490 --> 00:01:11,880 to set up that functionality. 15 00:01:12,380 --> 00:01:19,310 So since there's going to be three values, of course, I would want to set up that function to be accepting 16 00:01:19,310 --> 00:01:20,400 two parameters. 17 00:01:20,690 --> 00:01:24,620 One is going to be the data that is coming in, which is going to be minora. 18 00:01:24,920 --> 00:01:29,810 And then the second thing is going to be which ihram are we actually looking for? 19 00:01:30,110 --> 00:01:35,720 So in here, let's start with categories and that will be equal to might get unique values. 20 00:01:35,760 --> 00:01:36,380 Now, don't worry. 21 00:01:36,380 --> 00:01:38,150 At the moment it doesn't return anything. 22 00:01:38,520 --> 00:01:42,340 Like I said, this function is going to be looking for two values. 23 00:01:42,680 --> 00:01:46,790 First, the data that we're going to be passing in just going to be all product. 24 00:01:47,060 --> 00:01:50,240 And then the second thing will be that string value. 25 00:01:50,720 --> 00:01:56,180 So this is just going to signal, hey, listen, I want to get unique categories and then in the next 26 00:01:56,180 --> 00:02:01,640 one will look for unique colors and then the next time we will look for a company. 27 00:02:01,640 --> 00:02:07,880 And all of a sudden here, let's just pass in string value and for the categories, it's going to be 28 00:02:07,880 --> 00:02:09,620 equal to the category. 29 00:02:09,950 --> 00:02:15,740 And essentially why we're doing that is because each product has the property of category and of course 30 00:02:15,740 --> 00:02:17,060 it has some kind of value. 31 00:02:17,390 --> 00:02:21,860 Now, copy and paste, just so you can see how we're setting up all of them. 32 00:02:22,280 --> 00:02:26,720 And the next one will be companies, companies here. 33 00:02:27,020 --> 00:02:28,370 And then the same thing. 34 00:02:28,760 --> 00:02:33,860 Each object has the property of a company that's well past in the string value of the company. 35 00:02:34,160 --> 00:02:36,530 And lastly, we have colors. 36 00:02:36,860 --> 00:02:39,460 So I'm going to go with colors and get unique values. 37 00:02:39,480 --> 00:02:43,610 Again, we're passing the product and then we're looking for colors. 38 00:02:43,660 --> 00:02:44,780 Now, this is going to be an array. 39 00:02:44,780 --> 00:02:46,970 So there's going to be a little bit different functionality. 40 00:02:47,390 --> 00:02:52,730 And I'm not going to cancel like all of them since the functionality at the end of the day will be exactly 41 00:02:52,730 --> 00:02:53,160 the same. 42 00:02:53,360 --> 00:02:55,820 So the results should also be exactly the same. 43 00:02:56,150 --> 00:02:58,510 That's why I'll just cancel all of the categories. 44 00:02:59,240 --> 00:03:01,610 So you see what we're getting back. 45 00:03:01,940 --> 00:03:04,370 So at the moment, I'm concerned the categories. 46 00:03:04,370 --> 00:03:09,410 I shouldn't have nothing there because there's no functionality as far as I remember. 47 00:03:09,470 --> 00:03:10,510 So let's inspect. 48 00:03:10,640 --> 00:03:13,220 Yep, we have undefined now. 49 00:03:13,220 --> 00:03:15,710 I will remove that console log from the producer. 50 00:03:15,710 --> 00:03:16,970 Hopefully that is clear. 51 00:03:17,300 --> 00:03:20,150 So we're not overpopulating the console command. 52 00:03:20,150 --> 00:03:22,460 We just have the undefined. 53 00:03:22,460 --> 00:03:22,800 Why? 54 00:03:23,240 --> 00:03:30,110 Well, if we navigate through the file and of course I can find a file over here where I have get unique 55 00:03:30,110 --> 00:03:32,990 value and that is in the utils and helper's. 56 00:03:33,500 --> 00:03:35,540 Let's scroll down where we have it over here. 57 00:03:35,540 --> 00:03:37,000 Helper's at the moment. 58 00:03:37,010 --> 00:03:44,180 Notice there's nothing in the function and what I would want is to get my two parameters. 59 00:03:44,180 --> 00:03:49,730 So the arguments that I'm putting in, like I said, first one is all product and that's what I'm looking 60 00:03:49,730 --> 00:03:54,200 for the data and essentially that's what I'm calling and the second one is type. 61 00:03:54,650 --> 00:03:57,260 So that is going to be that string type. 62 00:03:57,620 --> 00:04:02,750 And we already remember that we essentially just set up the map method. 63 00:04:03,560 --> 00:04:07,820 So I would want to get all the values over here. 64 00:04:08,060 --> 00:04:08,990 So let's go here. 65 00:04:08,990 --> 00:04:10,550 We get unique. 66 00:04:11,500 --> 00:04:19,520 And unique or unique, and that one is equal to data maps or whatever and passing and I'm mapping out 67 00:04:19,780 --> 00:04:26,380 and then each item I'm going to describe as an item and then I'm looking for ihram and then type. 68 00:04:26,380 --> 00:04:31,540 And I got noticed how I'm accessing the property dynamically. 69 00:04:31,900 --> 00:04:38,700 So one case that is going to be the category, then the second thing is going to be company. 70 00:04:38,920 --> 00:04:41,440 And then lastly, it is going to be colors. 71 00:04:41,800 --> 00:04:47,640 So let's go back to our helpers and let's just cancel our step by step. 72 00:04:47,890 --> 00:04:51,580 So let's consult unique or here unique. 73 00:04:51,880 --> 00:04:54,670 And we should see an array, correct. 74 00:04:54,970 --> 00:04:56,470 So at the moment is undefined. 75 00:04:56,470 --> 00:05:03,610 But then eventually, once we pass in our product, notice, now these are going to be all my categories, 76 00:05:03,610 --> 00:05:07,450 for example, and then these are going to be all my companies. 77 00:05:07,720 --> 00:05:09,960 And eventually there's also going to be four colors. 78 00:05:10,150 --> 00:05:13,270 And this is where I'll have to do a little bit more work. 79 00:05:13,510 --> 00:05:14,930 But for time being, check it out. 80 00:05:15,220 --> 00:05:17,290 So these are going to be all my categories. 81 00:05:17,500 --> 00:05:19,450 Now, the goal here was to do what? 82 00:05:19,960 --> 00:05:22,480 To get only the unique ones correct. 83 00:05:22,810 --> 00:05:29,540 So, again, what we could do is just use the set operator and pass in that unit and then we'll spread 84 00:05:29,540 --> 00:05:31,870 it out and set it up in the newsroom. 85 00:05:32,230 --> 00:05:34,740 So now let's go here and let's say return. 86 00:05:34,990 --> 00:05:39,060 So from this function, what I would want to do is return Ainura. 87 00:05:39,980 --> 00:05:46,610 With the property of all and then also the that that's all you'd want to spread it out the new set, 88 00:05:46,620 --> 00:05:52,070 but this is going to be the data type that gets me only the unique values and precedent over here. 89 00:05:52,250 --> 00:05:58,070 Again, if you need a refresher, please go back to that project that we worked on where I covered that 90 00:05:58,070 --> 00:05:59,000 in more detail. 91 00:05:59,000 --> 00:06:06,380 And also you can check it out, the JavaScript Nugget series where we cover that mine in the console. 92 00:06:06,590 --> 00:06:09,050 I should see only the unique ones. 93 00:06:09,290 --> 00:06:10,670 So at the moment, nothing's happening. 94 00:06:10,670 --> 00:06:11,750 I'm just getting all. 95 00:06:11,990 --> 00:06:13,850 But then check it out here. 96 00:06:13,850 --> 00:06:19,040 I have all bedroom, office, kitchen and living room kids and dining again. 97 00:06:19,040 --> 00:06:24,110 If you really want to double check what you're getting, I would suggest going to the constants. 98 00:06:24,530 --> 00:06:31,640 And then you're looking for all the products and you'll see that each product has that property. 99 00:06:32,630 --> 00:06:41,030 In this category, you notice one is bedroom, one is the office, and we also have the kitchen and 100 00:06:41,030 --> 00:06:42,740 living room and all that. 101 00:06:43,040 --> 00:06:47,210 And the only thing we're doing in this case, we're just iterating over. 102 00:06:47,720 --> 00:06:51,410 And then I'm setting up the unique categories. 103 00:06:51,770 --> 00:06:54,780 So I'm not displaying the same category twice. 104 00:06:55,070 --> 00:06:55,970 I start with all. 105 00:06:56,150 --> 00:07:00,390 And then I have bedroom, office, kitchen, living room kids and dining. 106 00:07:00,740 --> 00:07:09,470 So if I decide in my API to add one more category, I don't have to go back in the project and manually 107 00:07:09,500 --> 00:07:09,830 at it. 108 00:07:10,220 --> 00:07:15,170 It's already going to be done for me because if I add that extra category, it's going to be displayed 109 00:07:15,380 --> 00:07:20,450 right over here or the same would work for a company and then the colors. 110 00:07:20,570 --> 00:07:27,350 And I'm just going to change my log to components just so you can see that we can display all our combination. 111 00:07:28,310 --> 00:07:34,400 Then once Ben comes along, in the beginning, we have all and then eventually we have all IKEA, Markos, 112 00:07:34,400 --> 00:07:35,990 Liddie and Caressa. 113 00:07:36,350 --> 00:07:39,530 So these are going to be all my unique companies. 114 00:07:39,890 --> 00:07:47,430 Now, the difference between the project is that in here we only had one set of unique routers. 115 00:07:47,540 --> 00:07:47,900 Correct. 116 00:07:48,260 --> 00:07:53,390 The reason why I'm setting up the whole function and then passing in the string, because each time 117 00:07:53,390 --> 00:07:56,480 I would want to get that unique value that I'm putting in. 118 00:07:56,810 --> 00:08:00,710 So either the category company or ticklers that's why. 119 00:08:01,010 --> 00:08:04,460 And the actual filter in the Helper's. 120 00:08:05,340 --> 00:08:10,890 I understand passing in the data and I have the specific type on each type, I'm passing in that string 121 00:08:11,100 --> 00:08:17,550 and then I'm saying, well, get me all of them, get me all the possible categories at me, all the 122 00:08:17,550 --> 00:08:20,390 possible categories as well as the colors. 123 00:08:20,700 --> 00:08:27,210 And lastly, now let's deal with colors because of course, with colors, we'll have to do a little 124 00:08:27,210 --> 00:08:27,940 bit more work. 125 00:08:27,960 --> 00:08:28,350 Why? 126 00:08:28,710 --> 00:08:37,020 Well, because if I can so log here the unique you'll see that, of course, since Colors is already 127 00:08:37,020 --> 00:08:41,950 an array, if we take a look at the opiners, colors is already an array. 128 00:08:42,330 --> 00:08:48,660 That's why when we are getting up those unique values now, we have an array of arrays. 129 00:08:48,990 --> 00:08:50,510 And that's not what I want. 130 00:08:50,850 --> 00:08:53,220 What I would want is to flatten them. 131 00:08:53,610 --> 00:09:01,620 And we'll do that by just checking if the type if the string is actually equal to colors but all around 132 00:09:01,620 --> 00:09:03,350 the flat method. 133 00:09:03,600 --> 00:09:12,880 So so if type is equal to colors, if that is the case, then I would want to flatten my unique, so, 134 00:09:12,910 --> 00:09:16,320 so unique is equal to unique of that flat. 135 00:09:16,680 --> 00:09:22,850 So that's just going to mean that we'll get that array instead of array of price. 136 00:09:23,130 --> 00:09:30,480 And now if I go back to the filters and if I want to log the colors, you'll see that the functionality 137 00:09:30,480 --> 00:09:31,860 will be exactly the same. 138 00:09:32,920 --> 00:09:38,260 We consulted on colors again in the beginning is going to be all, and then we have a nice array of 139 00:09:38,260 --> 00:09:39,990 only the unique colors. 140 00:09:40,330 --> 00:09:47,380 Hopefully that makes sense that if you need a refresher, you already know where to go and look for 141 00:09:47,650 --> 00:09:48,570 more info. 142 00:09:49,000 --> 00:09:57,560 But at this point, we should have these nice unique categories, unique colors as well as the companies. 143 00:09:57,840 --> 00:10:03,340 Now, of course, we can proceed and start displaying them in the filters component.