Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Filtering Paginated Data!
You have completed Practice Filtering Paginated Data!
Preview
In this video, we’ll show you one possible solution to the challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
How did it go?
0:01
If you weren't able to find a solution for
everything, don't worry,
0:03
you can watch my solution,
then go back and give it another go.
0:06
To start, I added an event listener on our
search input variable which is listening
0:10
for the key up event.
0:14
There are other events that work similarly
that you could have used such as input or
0:16
key down, and that's perfectly fine.
0:21
Check the teachers notes for
a list of keyboard events.
0:23
Then I created a variable,
named it newData, and
0:26
initialized it as an empty array.
0:30
This is what will push our
matched authors into soon, and
0:33
prevents us from altering
the original data.
0:36
This also means that every
time a user hits a key,
0:39
this is reset to an empty array to
go through the whole process again.
0:42
Next, I gathered the user's
input from the search bar,
0:46
forced it to lowercase, and saved it
to a variable which I named userInput.
0:49
Since we're listening for individual
keystrokes, every time the user types,
0:55
this will be updated to
the current text they've provided.
0:59
Now that we have this, we can get to work.
1:03
I started a for
loop to the length of our authors array.
1:07
Immediately inside,
I select the current author's name value,
1:11
force it to lowercase, and
save it into the authorName variable.
1:14
Now we can check if the current author's
name includes our user's input.
1:19
Since these were both forced to lowercase,
we shouldn't run into any issues regarding
1:23
the name or the input having capitals or
lowercase letters that don't match up.
1:27
So if this is true, I'm pushing the entire
author object into our newData array.
1:31
Once the loop has been completed and
1:38
we have our matching authors in our new
array, I ran this conditional statement.
1:39
I'm checking if the length of our
new array is greater than zero,
1:44
meaning we found at least one match and
added that author to it.
1:47
If this is true, I'm calling our
trusty handle pagination function and
1:52
passing it this newData
array as an argument.
1:55
That I'm calling our
handy showPage function.
1:59
Also passing it our newData array, and
giving it the number one because I wanna
2:01
always display the first page
of results after a search.
2:05
If we didn't find any matches, I start by
creating a string with no results found,
2:09
wrapped inside of some h3 tags, and saving
that to a variable that I've named HTML.
2:14
I then set the inner HTML of our
author container to this variable, and
2:20
set the inner HTML of our pagination list
to an empty string so no buttons appear.
2:24
And that's it.
2:30
Let's double check our
work in the browser.
2:31
I'll start by just typing an a,
in the search bar, and
2:33
you can see we now only have
three pagination buttons.
2:36
If we click through them,
2:40
we see that every author's
name has an a in it somewhere.
2:41
If I delete that,
we're back to the full set of data, nice.
2:51
Let's check our letter casing.
2:59
I'll start typing James with
jumbled capital letters, and
3:01
we can see that's working great as well.
3:04
Lastly, I'll just type a few
z's to force no results.
3:08
Our no results text appears nicely and
is removed once we delete the input.
3:12
Great, that wraps up this exercise.
3:17
Was your solution different from mine?
3:20
If so, that's perfectly fine.
3:22
There are always multiple
routes to take when coding, so
3:25
as long as things are working as expected,
mission accomplished.
3:28
We can always go back and refactor
our code when we learn new tricks.
3:32
I hope you had fun with this one,
I'll see you next time.
3:35
And until then, happy coding.
3:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up