- [Instructor] So, let's add the ability to filter
the list of users based on some search parameters.
So, to do that, I'm going to need to use this Gist
right here, and I'm going to hit this Raw button
to get the code and then come back here,
and I will collapse almost all of this right here.
And we're going to paste this right after the container.
So, just some nice looking bootstrap code
to allow us to search by whatever we put in here,
and there's a couple of extra buttons
we'll deal with later.
All right, so now that we have this,
we need to make sure that we have a V model
so that this is going to track a variable
called searchQuery, so we need to make sure
that we define that variable.
I'll do it right here, and I'm going to set it
to be empty, so this is one case where we don't want
to set it to null, we want it to have an empty value
instead of null, because we want it to essentially
search for an empty string as the default.
All right, so now, we need to create another
type of property, which is pretty cool.
It's called computed, and this will just allow us
to create a variable that is based on the value
of something else.
So in this case, we want to call this variable
filteredAttendees, and this will be a function,
doesn't get anything passed to it,
but we're going to create a filter first.
So we're going to use the filter method in JavaScript.
What you do is, you define a filter
that you want to push some data through,
and then you use that filter method to filter
a series of records, which is what we want to do here.
So, first, the filter, we'll call this dataFilter,
and the filter is going to go through
a series of items.
And with each item, I'm going to compare
a couple of things, so I'll say displayName,
the current name that's in the item,
to LowerCase, 'cause I want to make a comparison
that is case insensitive,
and then I will use the JavaScript match method
to look at the value of the searchQuery property
that I just created, also to LowerCase,
and make sure that is true.
So if it's true, then it matches
and then it will be pushed onto the data.
So then, I'm going to use the return statement
and take the current attendees, filter them
using that dataFilter that I just created.
So it's going to create a list of attendees
that is a subset of the current attendees,
filtered by whether or not what's in this
input field matches.
So, save that, and now let's go ahead
and open this back up.
Instead of looping through the attendees,
I'm going to loop through the filtered attendees,
all right, so let's check that out,
and now you can see that this filters the attendees.
Now, you could have done a query,
but every time you do a query and you get a new version
of a document through Firebase,
you're going to be charged for the data.
So, sometimes it's easier and better
to just use a filter when you don't need to create
another document search or query.