I recently realize a POC with Vue.js. I was
confronted to this problem: how to apply an unknown number of filter to a collection?
My previous POC works like this: when I click to a filter, this filter is automatically push in an
array of filter. And printed datas depends on this array of filters.
Let’s start with the following data:
And the following filters:
I can now chain the filters like this:
But what if I have to apply severals filters on the same bench of data? … like this:
Looping inside an array can be a solution:
But as I explain in my previous post: imperative
programming is not very elegant.
Solution: using recursion
A nicer solution is to use a functional approach by using recursion:
Bad solution: extending native prototype
As
explained in the MDN,
it is not recommended to extend native object (Array in our case). So the following code will works
despite the good practice violation.
About the author
Hey, I'm Maxence Poutord, a passionate software engineer. In my
day-to-day job, I'm working as a senior front-end engineer at Orderfox.
When I'm not working, you can find me travelling the world or cooking.