Advanced Firebase Data Filtering (Multi-Property)

Key Takeaways

filtering data is one of the more difficult aspects of working with Firebase in this episode I'm going to cover four different techniques that you can use to filter data by multiple values at the same time the goal is to achieve similar results to what you would expect by using the wear claws in a SQL database in this app we have a collection of animals and we want to be able to filter these animals by three different attributes at the same time we want to filter by an exact string match for the family for a weight range for the animal's weight and a Boolean value for whether or not the animal is endangered in the database we just have a collection of animals and each animal has the properties that we want to filter by if you've worked with angular Fire 2 you're probably used to making queries like this where you return a Firebase list observable and pass a query to sort by a certain value this works great when you want to filter by just one single value but if you have multiple values you have to take a different approach the best option is to filter the list client side that is after you've received the data from Firebase the main drawback is that you have to load the entire collection into memory which may not work for larger data sets in this example I'm going to create a client side filtering system that allows you to add and remove various filtering rules to your data start by importing the angular fire database and we're also going to make extensive use of low Dash in this example we set a variable for animals which will always be the full data set pulled from Firebase and fil animals will be a copy of it with the filter rules applied to it this allows us to add and remove filters on the Fly next we set some variables for the attributes that we want to filter then we create another object that will keep track of the active filters applied to the data set during NG on a knit we return the Firebase list observable And subscribe to it and the value that it emits will be the animals variable and then we apply any active filters to it this allows us to keep the database insane in real time the next step is to actually filter the data we do this using the low Dash filter function first we pass it the full data set and then we use another low Dash function called conforms conforms takes an entire object of functions that return either true or false this allows us to filter multiple attributes at the same time check out the full lesson Link in the description if you want more detail than that from there we can create our first filter I want to make these as reusable as possible so I pass a property is an argument and a rule which is the value that that property must conform to in this app every animal has a family property so we can pass it that property and then set the rule to bird and that'll return all the birds in the collection we can add any filters of any degree of complexity using this technique in this example we filter all the values that are greater than the rule you can add any logic to this function it just has to return true or false in this app we're using it to filter the weight weight property on animals greater than a certain threshold and the last filter we're going to set up is a Boolean filter this one operates a little bit different because if it's false we want to remove the filter altogether and if it's true we can just return true to remove a filter all we have to do is delete that property from the filter's object now let's see how we have everything wired up in the HTML we start by creating a select box and bind that to NG model and our family variable and that typescript then we can call the filter exact method passing it the family property as well as the family variable that's being set by NG model to remove a filter we just see if that family variable is defined and if so we allow the user to click a button that runs the remove filter method for the weight greater than we follow the same basic process just passing it a different variable and different property name at this point you might notice how these filter methods can be reused on any infinite number of properties and to to show the animals all we have to do is Loop over the filtered animals variable now when we go back to the app we have a basic client side filtering system all set up so what if your data set is too large for client side filtering the next option would be to create composite Keys the idea behind this is to combine multiple key value pairs into a single key value pair the main drawback is that it's only really practical for up to three properties after that you'll have way too many key value combinations to keep track of if we were to implement this in our app this is how the composite Keys would look in the database we would combine the keys and then combine their values allowing us in an indirect way to query for multiple properties at once then we could use these keys to query the database with angular Fire 2 just like normal if you think this is the right approach for your app there's also a library called query base that does this for you automatically it's experimental at this point but might be something to look into another another way to filter by multiple attributes in Firebase is to use a tag filtering strategy in this case you would denormalize your data to keep track of each item under a tag that it's associated with this would allow you to pull all the items associated with a specific tag and then combine them together you could either take the intersection or the union of those keys and then make a query for each item individually you could use the intersection helper from low Dash and then make requests for Fire based object observables based on the keys that are returned and the last option I'm going to talk about is using a third party service such as algolia or elastic search I made a couple videos recently about using algolia with angular 4 and Firebase and if you're doing a lot of advanced filtering of your data it's usually a good idea to Outsource this to a third party service data indexing is a rather high maintenance and error prone process so mess around with third party providers before trying to do the entire thing from scratch that's it for advanced filtering with fire base if this video helped you please like And subscribe and consider joining our slack team if you want to discuss this in more detail and if you want to support the channel become a pro member at angular firebase.com for a free copy of my book as well as one-on-one project Consulting thanks for watching and I'll see you [Music] soon