Angular forms validator
Compare one array to another. Make filtration in Angular.
Data filtering with lodash
Right now almost every project has a filtration. It could be easy to do filtration by only one property, but what if you have one array of options and you need to compare to another array. It could be tough.
Let’s start from creations models. We need two models, one for filters another for data.
User can listen and like different genres of film and music, those property we will filtrate.
Filter model contains just couple of arrays. We will use it to show user filter option and store selected filters.
Our UI will be simple. We have a couple of multi-select dropdown controls for filtration.
In angular cli we need to type ‘npm install ng-multiselect-dropdown’ and multiselect will be installed in out project. Then we need to import it in our module and use it in html.
Here you can found more information about this multselect.
Our ‘filtration’ class store information about filters, those properties we bind to our component. Also he has a method that check if any filter selected and filtration.
In filter components we just set up dropdown settings, generating data and filters.
In real life array in your model probably will have two main properties ‘id’ and ‘text’, because of that filters has those properties. In our case they contains the same text.
In html we show filtered data and bind dropdown to filtration class.
How will work filtration? There are two types of filtration: ‘and’, ‘or’.
User wants to see which of the men likes “rock”, “jazz” and “pop” music and also like “comedy” films.
First we need to check is user selected any filters or not. If not just return the same array which was send to us. If yes go further.
Imagine we have list of 10 people, we need to find all man that give us a 6 people. If user select “and” filter type we need to filtered 6 people and find who likes “rock” — 4 people, after that we need to filtered 4 people and find who like “jazz” — 3 people, do the same with “pop” and do final filtration, find who also like “comedy” — 2 people.
If user select “or” filter type wee need to filtered 6 people (the result of filter by gender), find people who likes “rock” — 4 people, then filtered 6 people find who likes “jazz” and make unique list of people who likes “rock” or “jazz”, then find who likes “pop” and make uniques list of people who like “rock” or “jazz” or “pop”. After that do final filtration in that list find people who also like “comedy”.
For implementation we need a couple of methods from ‘lodash’ library. This is very powerful library if you are not familiar with that, look at this library closer.
In angular cli we need to type ‘npm install -save lodash-es’ and small version of this library will be installed in our project.
In ‘lodash’ library we used methods like “unionBy” (take two arrays and return an array of unique item by “id”), “filter”, “some” (it is a predicate, return true if item contains in array ) and “intersectionBy” (take two arrays and return an array of duplicates).
If you need to take a close look on project here is the link.
Originally published at http://tomorrowmeannever.wordpress.com on December 17, 2019.
