Nicely done.
And once we have the input in place next, I would want to focus on the categories now categories.
I'll split this up into videos because four categories for the company as well as the colors, would
want to set up the unique values and is going to be extremely similar to one of the projects we did
at the very, very beginning, where we have the menu project.
And remember, each item was either breakfast, lunch or Scheck's.
And also we have this option for all.
And if you remember in this project, we iterate over and we got back only the unique values.
Plus we added this all.
So this is exactly what I would want to do for categories, for company and colors.
And that's why I set up this functionality first.
So I'm going to navigate to my filters component.
And here now we're getting this get unique values function from the helpers and first out, we want
to set up that functionality.
So since there's going to be three values, of course, I would want to set up that function to be accepting
two parameters.
One is going to be the data that is coming in, which is going to be minora.
And then the second thing is going to be which ihram are we actually looking for?
So in here, let's start with categories and that will be equal to might get unique values.
Now, don't worry.
At the moment it doesn't return anything.
Like I said, this function is going to be looking for two values.
First, the data that we're going to be passing in just going to be all product.
And then the second thing will be that string value.
So this is just going to signal, hey, listen, I want to get unique categories and then in the next
one will look for unique colors and then the next time we will look for a company.
And all of a sudden here, let's just pass in string value and for the categories, it's going to be
equal to the category.
And essentially why we're doing that is because each product has the property of category and of course
it has some kind of value.
Now, copy and paste, just so you can see how we're setting up all of them.
And the next one will be companies, companies here.
And then the same thing.
Each object has the property of a company that's well past in the string value of the company.
And lastly, we have colors.
So I'm going to go with colors and get unique values.
Again, we're passing the product and then we're looking for colors.
Now, this is going to be an array.
So there's going to be a little bit different functionality.
And I'm not going to cancel like all of them since the functionality at the end of the day will be exactly
the same.
So the results should also be exactly the same.
That's why I'll just cancel all of the categories.
So you see what we're getting back.
So at the moment, I'm concerned the categories.
I shouldn't have nothing there because there's no functionality as far as I remember.
So let's inspect.
Yep, we have undefined now.
I will remove that console log from the producer.
Hopefully that is clear.
So we're not overpopulating the console command.
We just have the undefined.
Why?
Well, if we navigate through the file and of course I can find a file over here where I have get unique
value and that is in the utils and helper's.
Let's scroll down where we have it over here.
Helper's at the moment.
Notice there's nothing in the function and what I would want is to get my two parameters.
So the arguments that I'm putting in, like I said, first one is all product and that's what I'm looking
for the data and essentially that's what I'm calling and the second one is type.
So that is going to be that string type.
And we already remember that we essentially just set up the map method.
So I would want to get all the values over here.
So let's go here.
We get unique.
And unique or unique, and that one is equal to data maps or whatever and passing and I'm mapping out
and then each item I'm going to describe as an item and then I'm looking for ihram and then type.
And I got noticed how I'm accessing the property dynamically.
So one case that is going to be the category, then the second thing is going to be company.
And then lastly, it is going to be colors.
So let's go back to our helpers and let's just cancel our step by step.
So let's consult unique or here unique.
And we should see an array, correct.
So at the moment is undefined.
But then eventually, once we pass in our product, notice, now these are going to be all my categories,
for example, and then these are going to be all my companies.
And eventually there's also going to be four colors.
And this is where I'll have to do a little bit more work.
But for time being, check it out.
So these are going to be all my categories.
Now, the goal here was to do what?
To get only the unique ones correct.
So, again, what we could do is just use the set operator and pass in that unit and then we'll spread
it out and set it up in the newsroom.
So now let's go here and let's say return.
So from this function, what I would want to do is return Ainura.
With the property of all and then also the that that's all you'd want to spread it out the new set,
but this is going to be the data type that gets me only the unique values and precedent over here.
Again, if you need a refresher, please go back to that project that we worked on where I covered that
in more detail.
And also you can check it out, the JavaScript Nugget series where we cover that mine in the console.
I should see only the unique ones.
So at the moment, nothing's happening.
I'm just getting all.
But then check it out here.
I have all bedroom, office, kitchen and living room kids and dining again.
If you really want to double check what you're getting, I would suggest going to the constants.
And then you're looking for all the products and you'll see that each product has that property.
In this category, you notice one is bedroom, one is the office, and we also have the kitchen and
living room and all that.
And the only thing we're doing in this case, we're just iterating over.
And then I'm setting up the unique categories.
So I'm not displaying the same category twice.
I start with all.
And then I have bedroom, office, kitchen, living room kids and dining.
So if I decide in my API to add one more category, I don't have to go back in the project and manually
at it.
It's already going to be done for me because if I add that extra category, it's going to be displayed
right over here or the same would work for a company and then the colors.
And I'm just going to change my log to components just so you can see that we can display all our combination.
Then once Ben comes along, in the beginning, we have all and then eventually we have all IKEA, Markos,
Liddie and Caressa.
So these are going to be all my unique companies.
Now, the difference between the project is that in here we only had one set of unique routers.
Correct.
The reason why I'm setting up the whole function and then passing in the string, because each time
I would want to get that unique value that I'm putting in.
So either the category company or ticklers that's why.
And the actual filter in the Helper's.
I understand passing in the data and I have the specific type on each type, I'm passing in that string
and then I'm saying, well, get me all of them, get me all the possible categories at me, all the
possible categories as well as the colors.
And lastly, now let's deal with colors because of course, with colors, we'll have to do a little
bit more work.
Why?
Well, because if I can so log here the unique you'll see that, of course, since Colors is already
an array, if we take a look at the opiners, colors is already an array.
That's why when we are getting up those unique values now, we have an array of arrays.
And that's not what I want.
What I would want is to flatten them.
And we'll do that by just checking if the type if the string is actually equal to colors but all around
the flat method.
So so if type is equal to colors, if that is the case, then I would want to flatten my unique, so,
so unique is equal to unique of that flat.
So that's just going to mean that we'll get that array instead of array of price.
And now if I go back to the filters and if I want to log the colors, you'll see that the functionality
will be exactly the same.
We consulted on colors again in the beginning is going to be all, and then we have a nice array of
only the unique colors.
Hopefully that makes sense that if you need a refresher, you already know where to go and look for
more info.
But at this point, we should have these nice unique categories, unique colors as well as the companies.
Now, of course, we can proceed and start displaying them in the filters component.