Apply filters on list

Greetings,

I have a question about filtering an array or ion-list based on some filters that user can apply. Can you please give me a heads up how to do it and what is the best way to achieve this? I want a similar functionality that Amazon provides. see screenshot below. Thank you.

Hello almobams,

The issue is what you show as an example is a very complex filter.

Then, I won’t tell you it’s not possible with Ionic2, but it all depends on where you store data / library you use to access it. For instance, I used dead IonicDB and now Firebase as a database. Each provides a prefilter which is very handy, because it requires almost zero code from your hand. But they both have a different syntax.

Which is very different if you use your own backend server to store data (which will probably based upon Ionic/Angular Http object), because it will be more complex of course.

While using Firebase now, I have built-in options like SortOrder or so to prefilter the output.

Anyways, I suggest you have a look at these tutorials from Josh Morony:


Hope that helps,

Thank you for your reply. Actually what I show is more complex than my need. All I need that I need to apply a set of filters on my list. Data is coming from a custom database. I have a set of items and I want to filter based on Date, status … etc.

How to add like filter icon to the top of a list that shows a pop-over to select the filters?

Then, what’re you looking for is more information on how to filter an Http dataset like I suspected. Unfortunately, I’m on an expert on that part.

Usually, you use the map function in conjunction with Http (that loads your custom database) to sort out, prefilter etc. And get what you want as a “json style” array. Something like that, assuming you have http class loaded in Controller.

this.posts = null;
 
this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=2&sort=hot').map(res => res.json()).subscribe(data => {
    this.posts = data.data.children;
    console.log(this.posts);
});

(In this code data.data is because you have to go 2 level down in arrays to actually grab usable data and not objects).

If all goes well from your database server, it will output a nice array in console, that you can work out and customize according to your filter, order needs etc. But that will only be one the backend side, once you want to manipulate it on the frontend side, you’ll have other plumbing works (see 2 tutorials above which are great).

This tutorial might help too, but it uses a simple PHP/MySQL data source.

Hope that helps :slight_smile: