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!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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