Preview
Video Player
00:00
00:00
Populating User Information
9:29We're now going to get user data from the API and print it out on the user route.
Now that we've organized our routes into
the router.js file, we can concentrate
0:00
on getting the live student data and
outputting that into our user route.
0:04
We're here in the router.js file.
0:09
And this is where we would want to do all
the username
0:11
profile information retrieval part of our
application.
0:16
So let's take a look at the example and
let's just copy and
0:21
paste some of this code here.
0:25
So let's grab the required statement at
the top and
0:26
the student profile variable and go to our
router.
0:30
And at the top, just have the profile
required.
0:35
Now let's cut the variable where we set
the user name
0:39
and put that into our user route.
0:46
So depending on whether if there is an
error or not, we're gonna keep
0:51
the response head and the header, or the
top part of our document the same.
0:56
But in the, underneath here, this is where
we will
1:01
get the JSON from treehouse, so let's just
pop that there,
1:07
and then on end, we want to show the
profile.
1:13
So remember we can just use this here.
1:19
What happens is that the JSON body is
fully received the end event is triggered.
1:24
So a, a, a JSON object will be passed into
this call back here.
1:28
So let's just copy and paste that
underneath our comment there,
1:35
and we'll create the function, or the
callback, or the handler, and
1:42
we will call it profile JSON, and in there
we will share our profile.
1:47
And on error, we want to show a error
message.
1:56
So let's just copy and paste this down
here.
1:59
Let's move our comments up as well.
2:04
And
[BLANK_AUDIO]
2:09
in the error handler,
2:12
[BLANK_AUDIO]
2:15
We get the error object.
2:20
And we wanna show the error.
2:25
[BLANK_AUDIO]
2:26
Now, before we go any further.
2:30
Let's take out this hardwired chalkers,
2:34
because we want this to be dynamic
depending on the URL you go to.
2:37
So we have this username here.
2:42
And if the username is greater than zero,
so it's not the empty string.
2:44
We want it to go out to the Treehouse
website, get the information and
2:48
bring it back into this profile JSON here.
2:53
So let's just write username.
2:56
And when that comes back, right now we'll
just create a simple response,
2:59
so we want to, if you remember when you go
to teamtreehouse.com/chalkers.json,
3:05
or whatever username .json.
3:12
You get this massive JSON object,
3:16
that, we won't be using all of this
information in our templates.
3:19
We can just make this a little bit more
concise.
3:23
So, we'll do that, as well.
3:26
So, star.
3:28
The values which we need.
3:33
So let's call var values and
3:38
we want the avatar URL.
3:43
[BLANK_AUDIO]
3:47
And we're gonna put that in there.
3:51
What else do we need?
3:54
We need the username.
3:55
[BLANK_AUDIO]
3:58
We also need the badge count.
4:02
[BLANK_AUDIO]
4:04
And we need the JavaScript points.
4:09
[BLANK_AUDIO]
4:11
And that goes there.
4:22
Cool.
4:24
So let's take a look at that JSON and see
what the avatar URL is.
4:25
Okay, so it's this gravitar URL here.
4:31
And it's on the profile JSON.
4:41
So this profile JSON, is actually the same
as this root up here.
4:43
The root of this object, so.
4:48
You go from profile.json.gravitar URL.
4:50
What's next?
4:55
Username, and that's profile, oh, profile
name.
4:56
[BLANK_AUDIO]
5:03
And then the badges.
5:17
[BLANK_AUDIO]
5:19
So the badges is an array because it's got
these square brackets, so
5:22
we can call the .length method on it.
5:26
And then the JavaScript points.
5:36
So in every Treehouse user profile there's
a points
5:39
dictionary with all the topic areas with
their relevant point, so.
5:43
We just want JavaScript.
5:50
And remember it's case-sensitive.
5:53
So, you need to be careful with your
capitalizations.
5:55
[BLANK_AUDIO]
5:58
Cool.
6:04
And, let's do a simple response.
6:06
[BLANK_AUDIO]
6:08
And so before when it was just doing,
printed out the user name,
6:15
we didn't have any call backs.
6:20
We weren't going out to the internet and
waiting and then doing something, so
6:22
we need to write an end in every call back
that we, we do.
6:27
Remember with that set interval we did the
end after it, and
6:33
that callback in the set interval got
executed a second after it ended.
6:37
So now we need to wait for the data to
come in.
6:41
We do whatever we want with that data, and
then we end the response.
6:44
And the same goes for the arrow down here.
6:48
So, I'm just gonna put the ends in both of
these so
6:50
that we don't forget to do it later on.
6:54
[BLANK_AUDIO]
6:57
Let's clean up some space.
7:03
Cool.
7:07
So let's do a simple response with this
value so.
7:08
Values.username has
7:12
values.badges.
7:18
So this should read chalkers has how ever
many badges I have badges [LAUGH].
7:26
Okay, so let's try that out.
7:31
Cool.
7:36
So let's go to /chalkers and see if that
works.
7:37
And it says chalkers has 162 badges.
7:47
Okay, let's try someone else.
7:51
Let's try joykesten2.
7:54
And as you can see she's got 130 badges,
cool.
8:00
Now let's handle the case where we type in
a random user that doesn't exist,
8:04
and see what happens.
8:10
So in our on error, let's provide a
response, and write out the error message.
8:13
Remember, error objects have a message
property.
8:22
So, let's write that.
8:27
[BLANK_AUDIO]
8:28
And do a return.
8:31
[BLANK_AUDIO]
8:32
Let's kill our server.
8:41
And start it up again.
8:46
Go back to our preview.
8:49
[BLANK_AUDIO]
8:49
Let's go to chalkers.
8:54
That works.
8:58
And let's try chalkers 1, 2, 3 and hit
Enter.
9:00
[BLANK_AUDIO]
9:03
And it says there was an error getting the
profile for chalkers123, not found, cool.
9:05
So we're showing both the information from
the user and
9:11
we're showing the error message when that
occurs.
9:14
Slowly but surely we're getting closer to
our goal.
9:17
We've got an HTTP service responding to
two different routes, the home and
9:20
user route and we're getting user
information.
9:25
Well done.
9:28