Preview
Video Player
00:00
00:00
Getting the Response Body
5:17In this video, we'll get the body from the response using something called a Stream.
We need more than just a status code to
complete our goal of getting a student's
0:00
profile information.
0:03
So we can retrieve their badge count
and total number of JavaScript points.
0:05
We can get more info from
the body of the response.
0:09
Let's go back to the docs.
0:13
The response object is a data
event that gets emitted when
0:14
a piece of data like student
data from an API comes in.
0:19
Let's check out what happens when
this event occurs in our code.
0:24
We can add a handler for
the data event and
0:28
give it a console.dir statement
to print out the response.
0:30
In Node,
we handle events using the on method.
0:34
We pass the on method two arguments,
an event to watch for and
0:38
a callback function to run
when that event occurs.
0:42
Similar to addEventListener.
0:45
In this case, the event to watch for
is the data event.
0:48
The data event occurs when data
is received by our program.
0:51
Passing around large amounts of data is
best done with a certain type of data.
0:55
Buffers.
1:00
All data types like strings are useful for
humans, machines use binary data or
1:04
data in the forms of ones and zeros.
1:08
Large amounts of binary data are called
streams and can be stored using buffers.
1:11
We'll add a console.dir statement to get
a better idea of what buffers look like.
1:16
When we run our code,
something interesting should happen.
1:22
So first watch for
the data event on the response object.
1:33
And we'll pass the data in
to the callback function,
1:42
console.dir(data); Back to
1:53
the terminal, there's our buffers.
2:00
Now, this data isn't really readable or
useful for us in this format.
2:08
But don't worry, we'll fix that.
2:13
Because the data comes in piece by piece,
we can define a variable to store
2:17
the response and concatenate data
to it until the stream is complete.
2:21
I'll create a variable named body
to store the response body and
2:30
set it to an empty string for now.
2:33
Inside this event handler,
instead of printing out the response,
2:36
Let's add the data.
2:43
We know this data is in
the form of a buffer.
2:53
We'll want to convert that to a string,
so that we can use it.
2:56
How will we know when
the request has ended?
3:04
Along with the data event,
there's also an end event that's emitted
3:09
when there is no more data to
be consumed from the stream.
3:13
This tells us when all
the data has been sent.
3:18
And we can handle this event just
like other events in our callback.
3:21
So on the response object,
we'll watch for the end event.
3:30
And when this happens,
we'll run a callback function,
3:36
Print out the body object or
the body string in this case, save.
3:47
And our entire response body is returned.
4:01
Now in this format,
the data isn't super readable or usable.
4:04
We'll fix that, we wanna make this string
an object so it's easier to interact with.
4:10
As an object,
we can access only the properties we want.
4:16
Converting a string to a data
structure is called parsing.
4:19
JSON is a native JavaScript object, so
4:23
we can use one of its
methods to parse our string.
4:25
The JSON parse method takes a string and
returns a JSON object.
4:28
We'll run JSON.parse on our body, Save.
4:41
Now try printing this out.
4:50
Now our data is an object and
it's much more readable.
5:00
We get an array with all of Carlos's
badges and point totals.
5:04
In the next video we'll wrap up our
project's main functionality and
5:10
add the ability to search for
different users.
5:14