In this episode I provide strategies for filtering data in Firebase with multiple properties or attributes, similar to a SQL where clause. Client-side filtering is performed with Angular 4.3. Check out the full lesson: https://angularfirebase.com/lessons/multi-property-data-filtering-with-firebase-and-angular-4/
2024-02-04T08:18:59.727Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
f4f56e00-ba69-47da-b8cd-4c42e161a84a
a06f02f552b85d2da4833fabc07cd9c2dcf7ec7c6975f55047798bc6d16293e6
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Filtering data is one of the more difficult aspects of working with Firebase.
In this episode, I'm going to cover 4 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 where clause in a SQL database.
In this app, we have a collection of animals and we wanna be able to filter these animals by 3 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, uh, 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 wanna filter by.
If you've worked with AngularFire 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 wanna filter by just one single value.
But if you have multiple values, you have to take a different approach.
The best Shenas 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 datasets.
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 AngularFire database, and we're also gonna make extensive use of Lodash in this example.
We set a variable for animals which will always be the full dataset pulled from Firebase and filtered 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 wanna filter.
Then we create another object that will keep track of the active filters applied to the dataset.
During n g on init, 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 in sync in real time.
The next step is to actually filter the data.
We do this using the lodash filter function.
First, we pass it the full dataset, and then we use another Lodash 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 wanna make these as reusable as possible.
So I pass a property as 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 property on animals greater than a certain threshold.
And the last filter we're gonna 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 filters 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 in the 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 in g 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 at 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 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 dataset 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 3 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 AngularFire 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 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 Lodash and then make requests for Firebase object observables based on the keys that are returned.
And the last option I'm gonna talk about is using a third party service such as Algolia or Elasticsearch.
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 3rd party providers before trying to do the entire thing from scratch.
That's it for advanced filtering with Firebase.
If this video helped you, please like and scribe, and consider joining our Slack team if you wanna discuss this in more detail.
And if you wanna support the channel, become a pro member at angularfirebase .com for a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching, and I'll see you soon.

Speaker 0: Filtering data is one of the more difficult aspects of working with Firebase. In this episode, I'm going to cover 4 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 where clause in a SQL database. In this app, we have a collection of animals and we wanna be able to filter these animals by 3 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, uh, 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 wanna filter by. If you've worked with AngularFire 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 wanna filter by just one single value. But if you have multiple values, you have to take a different approach. The best Shenas 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 datasets. 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 AngularFire database, and we're also gonna make extensive use of Lodash in this example. We set a variable for animals which will always be the full dataset pulled from Firebase and filtered 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 wanna filter. Then we create another object that will keep track of the active filters applied to the dataset. During n g on init, 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 in sync in real time. The next step is to actually filter the data.

We do this using the lodash filter function. First, we pass it the full dataset, and then we use another Lodash 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 wanna make these as reusable as possible. So I pass a property as 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 property on animals greater than a certain threshold.

And the last filter we're gonna 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 filters 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 in the 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 in g 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 at 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 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 dataset 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 3 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 AngularFire 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 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 Lodash and then make requests for Firebase object observables based on the keys that are returned. And the last option I'm gonna talk about is using a third party service such as Algolia or Elasticsearch. 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 3rd party providers before trying to do the entire thing from scratch. That's it for advanced filtering with Firebase. If this video helped you, please like and scribe, and consider joining our Slack team if you wanna discuss this in more detail.

And if you wanna support the channel, become a pro member at angularfirebase .com for a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Filtering data is one of the more difficult aspects of working with Firebase. In this episode, I'm going to cover 4 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 where clause in a SQL database. In this app, we have a collection of animals and we wanna be able to filter these animals by 3 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, uh, 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 wanna filter by. If you've worked with AngularFire 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.
animals
databases
livestock
wildlife
data management
data analysis
hunting
data
This works great when you wanna filter by just one single value. But if you have multiple values, you have to take a different approach. The best Shenas 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 datasets. 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 AngularFire database, and we're also gonna make extensive use of Lodash in this example. We set a variable for animals which will always be the full dataset pulled from Firebase and filtered animals will be a copy of it with the filter rules applied to it.
databases
This allows us to add and remove filters on the fly. Next, we set some variables for the attributes that we wanna filter. Then we create another object that will keep track of the active filters applied to the dataset.
During n g on init, 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 in sync in real time. The next step is to actually filter the data.
data
data management
We do this using the lodash filter function. First, we pass it the full dataset, and then we use another Lodash 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 wanna make these as reusable as possible. So I pass a property as 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.
wildlife
birds
animals
livestock
hunting
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 property on animals greater than a certain threshold. And the last filter we're gonna 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 filters 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 in the 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 in g model.
parenting
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 at 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 show the animals, all we have to do is loop over the filtered animals variable.
animals
livestock
Now when we go back to the app, we have a basic client side filtering system all set up. So what if your dataset 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 3 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 AngularFire 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.
databases
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 Lodash and then make requests for Firebase object observables based on the keys that are returned. And the last option I'm gonna talk about is using a third party service such as Algolia or Elasticsearch. 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 3rd party providers before trying to do the entire thing from scratch. That's it for advanced filtering with Firebase. If this video helped you, please like and scribe, and consider joining our Slack team if you wanna discuss this in more detail. And if you wanna support the channel, become a pro member at angularfirebase .com for a free copy of my book as well as 1 on 1 project consulting.
data management
youtube
streaming
data analysis
Thanks for watching, and I'll see you soon.
Filtering data is one of the more difficult aspects of working with Firebase. In this episode, I'm going to cover 4 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 where clause in a SQL database. In this app, we have a collection of animals and we wanna be able to filter these animals by 3 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, uh, 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 wanna filter by. If you've worked with AngularFire 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 wanna filter by just one single value. But if you have multiple values, you have to take a different approach. The best Shenas 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 datasets. 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 AngularFire database, and we're also gonna make extensive use of Lodash in this example. We set a variable for animals which will always be the full dataset pulled from Firebase and filtered 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 wanna filter. Then we create another object that will keep track of the active filters applied to the dataset. During n g on init, 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 in sync in real time. The next step is to actually filter the data. We do this using the lodash filter function. First, we pass it the full dataset, and then we use another Lodash 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 wanna make these as reusable as possible. So I pass a property as 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 property on animals greater than a certain threshold. And the last filter we're gonna 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 filters 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 in the 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 in g 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 at 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 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 dataset 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 3 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 AngularFire 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 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 Lodash and then make requests for Firebase object observables based on the keys that are returned. And the last option I'm gonna talk about is using a third party service such as Algolia or Elasticsearch. 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 3rd party providers before trying to do the entire thing from scratch. That's it for advanced filtering with Firebase. If this video helped you, please like and scribe, and consider joining our Slack team if you wanna discuss this in more detail. And if you wanna support the channel, become a pro member at angularfirebase .com for a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Filtering
filtering
data
data
is
is
one
one
of
of
the
the
more
more
difficult
difficult
aspects
aspects
of
of
working
working
with
with
Firebase.
firebase
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
cover
cover
4
4
different
different
techniques
techniques
that
that
you
you
can
can
use
use
to
to
filter
filter
data
data
by
by
multiple
multiple
values
values
at
at
the
the
same
same
time.
time
The
the
goal
goal
is
is
to
to
achieve
achieve
similar
similar
results
results
to
to
what
what
you
you
would
would
expect
expect
by
by
using
using
the
the
where
where
clause
clause
in
in
a
a
SQL
sql
database.
database
In
in
this
this
app,
app
we
we
have
have
a
a
collection
collection
of
of
animals
animals
and
and
we
we
wanna
wanna
be
be
able
able
to
to
filter
filter
these
these
animals
animals
by
by
3
3
different
different
attributes
attributes
at
at
the
the
same
same
time.
time
We
we
want
want
to
to
filter
filter
by
by
an
an
exact
exact
string
string
match
match
for
for
the
the
family
family
for
for
a
a
weight
weight
range
range
for
for
the
the
animal's
animal's
weight
weight
and,
and
uh,
uh
Boolean
boolean
value
value
for
for
whether
whether
or
or
not
not
the
the
animal
animal
is
is
endangered.
endangered
In
in
the
the
database,
database
we
we
just
just
have
have
a
a
collection
collection
of
of
animals
animals
and
and
each
each
animal
animal
has
has
the
the
properties
properties
that
that
we
we
wanna
wanna
filter
filter
by.
by
If
if
you've
you've
worked
worked
with
with
AngularFire
angularfire
2,
2
you're
you're
probably
probably
used
used
to
to
making
making
queries
queries
like
like
this
this
where
where
you
you
return
return
a
a
Firebase
firebase
list
list
observable
observable
and
and
pass
pass
a
a
query
query
to
to
sort
sort
by
by
a
a
certain
certain
value.
value
This
this
works
works
great
great
when
when
you
you
wanna
wanna
filter
filter
by
by
just
just
one
one
single
single
value.
value
But
but
if
if
you
you
have
have
multiple
multiple
values,
values
you
you
have
have
to
to
take
take
a
a
different
different
approach.
approach
The
the
best
best
Shenas
shenas
to
to
filter
filter
the
the
list
list
client
client
side,
side
that
that
is
is
after
after
you've
you've
received
received
the
the
data
data
from
from
Firebase.
firebase
The
the
main
main
drawback
drawback
is
is
that
that
you
you
have
have
to
to
load
load
the
the
entire
entire
collection
collection
into
into
memory,
memory
which
which
may
may
not
not
work
work
for
for
larger
larger
datasets.
datasets
In
in
this
this
example,
example
I'm
i'm
going
going
to
to
create
create
a
a
client
client
side
side
filtering
filtering
system
system
that
that
allows
allows
you
you
to
to
add
add
and
and
remove
remove
various
various
filtering
filtering
rules
rules
to
to
your
your
data.
data
Start
start
by
by
importing
importing
the
the
AngularFire
angularfire
database,
database
and
and
we're
we're
also
also
gonna
gonna
make
make
extensive
extensive
use
use
of
of
Lodash
lodash
in
in
this
this
example.
example
We
we
set
set
a
a
variable
variable
for
for
animals
animals
which
which
will
will
always
always
be
be
the
the
full
full
dataset
dataset
pulled
pulled
from
from
Firebase
firebase
and
and
filtered
filtered
animals
animals
will
will
be
be
a
a
copy
copy
of
of
it
it
with
with
the
the
filter
filter
rules
rules
applied
applied
to
to
it.
it
This
this
allows
allows
us
us
to
to
add
add
and
and
remove
remove
filters
filters
on
on
the
the
fly.
fly
Next,
next
we
we
set
set
some
some
variables
variables
for
for
the
the
attributes
attributes
that
that
we
we
wanna
wanna
filter.
filter
Then
then
we
we
create
create
another
another
object
object
that
that
will
will
keep
keep
track
track
of
of
the
the
active
active
filters
filters
applied
applied
to
to
the
the
dataset.
dataset
During
during
n
n
g
g
on
on
init,
init
we
we
return
return
the
the
Firebase
firebase
list
list
observable
observable
and
and
subscribe
subscribe
to
to
it
it
and
and
the
the
value
value
that
that
it
it
emits
emits
will
will
be
be
the
the
animals
animals
variable
variable
and
and
then
then
we
we
apply
apply
any
any
active
active
filters
filters
to
to
it.
it
This
this
allows
allows
us
us
to
to
keep
keep
the
the
database
database
in
in
sync
sync
in
in
real
real
time.
time
The
the
next
next
step
step
is
is
to
to
actually
actually
filter
filter
the
the
data.
data
We
we
do
do
this
this
using
using
the
the
lodash
lodash
filter
filter
function.
function
First,
first
we
we
pass
pass
it
it
the
the
full
full
dataset,
dataset
and
and
then
then
we
we
use
use
another
another
Lodash
lodash
function
function
called
called
Conforms.
conforms
Conforms
conforms
takes
takes
an
an
entire
entire
object
object
of
of
functions
functions
that
that
return
return
either
either
true
true
or
or
false.
false
This
this
allows
allows
us
us
to
to
filter
filter
multiple
multiple
attributes
attributes
at
at
the
the
same
same
time.
time
Check
check
out
out
the
the
full
full
lesson
lesson
link
link
in
in
the
the
description
description
if
if
you
you
want
want
more
more
detail
detail
than
than
that.
that
From
from
there,
there
we
we
can
can
create
create
our
our
first
first
filter.
filter
I
i
wanna
wanna
make
make
these
these
as
as
reusable
reusable
as
as
possible.
possible
So
so
I
i
pass
pass
a
a
property
property
as
as
an
an
argument
argument
and
and
a
a
rule,
rule
which
which
is
is
the
the
value
value
that
that
that
that
property
property
must
must
conform
conform
to.
to
In
in
this
this
app,
app
every
every
animal
animal
has
has
a
a
family
family
property.
property
So
so
we
we
can
can
pass
pass
it
it
that
that
property
property
and
and
then
then
set
set
the
the
rule
rule
to
to
bird
bird
and
and
that'll
that'll
return
return
all
all
the
the
birds
birds
in
in
the
the
collection.
collection
We
we
can
can
add
add
any
any
filters
filters
of
of
any
any
degree
degree
of
of
complexity
complexity
using
using
this
this
technique.
technique
In
in
this
this
example,
example
we
we
filter
filter
all
all
the
the
values
values
that
that
are
are
greater
greater
than
than
the
the
rule.
rule
You
you
can
can
add
add
any
any
logic
logic
to
to
this
this
function.
function
It
it
just
just
has
has
to
to
return
return
true
true
or
or
false.
false
In
in
this
this
app,
app
we're
we're
using
using
it
it
to
to
filter
filter
the
the
weight
weight
property
property
on
on
animals
animals
greater
greater
than
than
a
a
certain
certain
threshold.
threshold
And
and
the
the
last
last
filter
filter
we're
we're
gonna
gonna
set
set
up
up
is
is
a
a
boolean
boolean
filter.
filter
This
this
one
one
operates
operates
a
a
little
little
bit
bit
different
different
because
because
if
if
it's
it's
false,
false
we
we
want
want
to
to
remove
remove
the
the
filter
filter
altogether.
altogether
And
and
if
if
it's
it's
true,
true
we
we
can
can
just
just
return
return
true.
true
To
to
remove
remove
a
a
filter,
filter
all
all
we
we
have
have
to
to
do
do
is
is
delete
delete
that
that
property
property
from
from
the
the
filters
filters
object.
object
Now
now
let's
let's
see
see
how
how
we
we
have
have
everything
everything
wired
wired
up
up
in
in
the
the
HTML.
html
We
we
start
start
by
by
creating
creating
a
a
select
select
box
box
and
and
bind
bind
that
that
to
to
ng
ng
model
model
and
and
our
our
family
family
variable
variable
in
in
the
the
TypeScript.
typescript
Then
then
we
we
can
can
call
call
the
the
filter
filter
exact
exact
method,
method
passing
passing
it
it
the
the
family
family
property
property
as
as
well
well
as
as
the
the
family
family
variable
variable
that's
that's
being
being
set
set
by
by
in
in
g
g
model.
model
To
to
remove
remove
a
a
filter,
filter
we
we
just
just
see
see
if
if
that
that
family
family
variable
variable
is
is
defined.
defined
And
and
if
if
so,
so
we
we
allow
allow
the
the
user
user
to
to
click
click
a
a
button
button
that
that
runs
runs
the
the
remove
remove
filter
filter
method.
method
For
for
the
the
weight
weight
greater
greater
than,
than
we
we
follow
follow
the
the
same
same
basic
basic
process
process
just
just
passing
passing
at
at
a
a
different
different
variable
variable
and
and
different
different
property
property
name.
name
At
at
this
this
point,
point
you
you
might
might
notice
notice
how
how
these
these
Filter
filter
methods
methods
can
can
be
be
reused
reused
on
on
any
any
infinite
infinite
number
number
of
of
properties.
properties
And
and
to
to
show
show
the
the
animals,
animals
all
all
we
we
have
have
to
to
do
do
is
is
loop
loop
over
over
the
the
filtered
filtered
animals
animals
variable.
variable
Now
now
when
when
we
we
go
go
back
back
to
to
the
the
app,
app
we
we
have
have
a
a
basic
basic
client
client
side
side
filtering
filtering
system
system
all
all
set
set
up.
up
So
so
what
what
if
if
your
your
dataset
dataset
is
is
too
too
large
large
for
for
client
client
side
side
filtering?
filtering
The
the
next
next
option
option
would
would
be
be
to
to
create
create
composite
composite
keys.
keys
The
the
idea
idea
behind
behind
this
this
is
is
to
to
combine
combine
multiple
multiple
key
key
value
value
pairs
pairs
into
into
a
a
single
single
key
key
value
value
pair.
pair
The
the
main
main
drawback
drawback
is
is
that
that
it's
it's
only
only
really
really
practical
practical
for
for
up
up
to
to
3
3
properties.
properties
After
after
that,
that
you'll
you'll
have
have
way
way
too
too
many
many
key
key
value
value
combinations
combinations
to
to
keep
keep
track
track
of.
of
If
if
we
we
were
were
to
to
implement
implement
this
this
in
in
our
our
app,
app
this
this
is
is
how
how
the
the
composite
composite
keys
keys
would
would
look
look
in
in
the
the
database.
database
We
we
would
would
combine
combine
the
the
keys
keys
and
and
then
then
combine
combine
their
their
values,
values
allowing
allowing
us
us
in
in
an
an
indirect
indirect
way
way
to
to
query
query
for
for
multiple
multiple
properties
properties
at
at
once.
once
Then
then
we
we
could
could
use
use
these
these
keys
keys
to
to
query
query
the
the
database
database
with
with
AngularFire
angularfire
2
2
just
just
like
like
normal.
normal
If
if
you
you
think
think
this
this
is
is
the
the
right
right
approach
approach
for
for
your
your
app,
app
there's
there's
also
also
a
a
library
library
called
called
query
query
base
base
that
that
does
does
this
this
for
for
you
you
automatically.
automatically
It's
it's
experimental
experimental
at
at
this
this
point,
point
but
but
might
might
be
be
something
something
to
to
look
look
into.
into
Another
another
way
way
to
to
filter
filter
by
by
multiple
multiple
attributes
attributes
in
in
Firebase
firebase
is
is
to
to
use
use
a
a
tag
tag
filtering
filtering
strategy.
strategy
In
in
this
this
case,
case
you
you
would
would
denormalize
denormalize
your
your
data
data
to
to
keep
keep
track
track
of
of
each
each
item
item
under
under
a
a
tag
tag
that
that
it's
it's
associated
associated
with.
with
This
this
would
would
allow
allow
you
you
to
to
pull
pull
all
all
the
the
items
items
associated
associated
with
with
a
a
specific
specific
tag
tag
and
and
then
then
combine
combine
them
them
together.
together
You
you
could
could
either
either
take
take
the
the
intersection
intersection
or
or
the
the
union
union
of
of
those
those
keys
keys
and
and
then
then
make
make
a
a
query
query
for
for
each
each
item
item
individually.
individually
You
you
could
could
use
use
the
the
intersection
intersection
helper
helper
from
from
Lodash
lodash
and
and
then
then
make
make
requests
requests
for
for
Firebase
firebase
object
object
observables
observables
based
based
on
on
the
the
keys
keys
that
that
are
are
returned.
returned
And
and
the
the
last
last
option
option
I'm
i'm
gonna
gonna
talk
talk
about
about
is
is
using
using
a
a
third
third
party
party
service
service
such
such
as
as
Algolia
algolia
or
or
Elasticsearch.
elasticsearch
I
i
made
made
a
a
couple
couple
videos
videos
recently
recently
about
about
using
using
Algolia
algolia
with
with
Angular
angular
4
4
and
and
Firebase.
firebase
And
and
if
if
you're
you're
doing
doing
a
a
lot
lot
of
of
advanced
advanced
filtering
filtering
of
of
your
your
data
data
It's
it's
usually
usually
a
a
good
good
idea
idea
to
to
outsource
outsource
this
this
to
to
a
a
third
third
party
party
service.
service
Data
data
indexing
indexing
is
is
a
a
rather
rather
high
high
maintenance
maintenance
and
and
error
error
prone
prone
process.
process
So
so
mess
mess
around
around
with
with
3rd
3rd
party
party
providers
providers
before
before
trying
trying
to
to
do
do
the
the
entire
entire
thing
thing
from
from
scratch.
scratch
That's
that's
it
it
for
for
advanced
advanced
filtering
filtering
with
with
Firebase.
firebase
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
scribe,
scribe
and
and
consider
consider
joining
joining
our
our
Slack
slack
team
team
if
if
you
you
wanna
wanna
discuss
discuss
this
this
in
in
more
more
detail.
detail
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
become
become
a
a
pro
pro
member
member
at
at
angularfirebase
angularfirebase
.com
com
for
for
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
In this video, the speaker discusses various techniques for filtering data by multiple values using the "where clause" in SQL database. They explain how to set variables for multiple attributes and filter the data, and then discuss a tool called Conforms to filter by multiple attributes and remove filters. The speaker also suggests using a tag filtering strategy and outsource it to a third party service.
Advanced Firebase Data Filtering (Multi-Property)
Filtering data is one of the more difficult aspects of working with Firebase. In this episode, I'm going to cover 4 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 where clause in a SQL database. In this app, we have a collection of animals and we wanna be able to filter these animals by 3 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, uh, 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 wanna filter by. If you've worked with AngularFire 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 wanna filter by just one single value. But if you have multiple values, you have to take a different approach. The best Shenas 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 datasets. 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 AngularFire database, and we're also gonna make extensive use of Lodash in this example. We set a variable for animals which will always be the full dataset pulled from Firebase and filtered 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 wanna filter. Then we create another object that will keep track of the active filters applied to the dataset. During n g on init, 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 in sync in real time. The next step is to actually filter the data. We do this using the lodash filter function. First, we pass it the full dataset, and then we use another Lodash 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 wanna make these as reusable as possible. So I pass a property as 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 property on animals greater than a certain threshold. And the last filter we're gonna 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 filters 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 in the 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 in g 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 at 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 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 dataset 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 3 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 AngularFire 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 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 Lodash and then make requests for Firebase object observables based on the keys that are returned. And the last option I'm gonna talk about is using a third party service such as Algolia or Elasticsearch. 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 3rd party providers before trying to do the entire thing from scratch. That's it for advanced filtering with Firebase. If this video helped you, please like and scribe, and consider joining our Slack team if you wanna discuss this in more detail. And if you wanna support the channel, become a pro member at angularfirebase .com for a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
In this video, the speaker discusses various techniques for filtering data by multiple values using the "where clause" in SQL database. They explain how to set variables for multiple attributes and filter the data, and then discuss a tool called Conforms to filter by multiple attributes and remove filters. The speaker also suggests using a tag filtering strategy and outsource it to a third party service.