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 REST APIs with Express!
You have completed REST APIs with Express!
Preview
Learn how to set up an Express route that provides an endpoint to get the list of quotes and a specific quote.
Data snippet
const data = {
quotes: [
{
id: 8721,
quote: "We must accept finite disappointment, but we must never lose infinite hope.",
author: "Martin Luther King"
},
{
id: 5779,
quote: "Use what you’ve been through as fuel, believe in yourself and be unstoppable!",
author: "Yvonne Pierre"
},
{
id: 3406,
quote: "To succeed, you have to do something and be very bad at it for a while. You have to look bad before you can look really good.",
author: "Barbara DeAngelis"
}
]
}
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
Open up the project files,
if you don't have them open already.
0:00
In this video we're going to write GET
routes using data stored in this variable
0:03
named data, which contains an object
with an array of quote objects.
0:08
If you've been following along with me,
you can copy and
0:12
paste this data into your project
from the teacher's notes.
0:15
Ideally we wouldn't want to keep our data
in this file with all the rest of our
0:17
code, we'd wanna use
some kind of data store.
0:21
This is most often going to be a database,
like PostgreSQL or MongoDB, but it
0:24
could also be a JSON file or in our case
here just a regular JavaScript object.
0:29
For now this JavaScript object is going
to serve as our data store, meaning we're
0:34
going to pull quote information out of
it and send it to the client as JSON.
0:39
The first item on our to-do
list is to create a route that
0:43
responds to a GET request to the endpoint
/quotes with the entire list of quotes.
0:46
To get started, I'll first copy and
0:51
paste our existing GET route beneath
the first item on our to-do list.
0:53
I'll then modify the GET method so
that it handles a route called /quotes.
1:01
Inside the JSON method,
I'll pass the variable data,
1:08
which is what we've named the variable
that contains our array of quotes.
1:11
Now let's start up the server, And
1:21
go to our browser, and
go to localhost3000/quotes.
1:27
Excellent, we're getting back
a list of quotes as JSON.
1:34
Let's add the ability to request and
receive a single quote.
1:37
To do this, we'll add another GET route.
1:41
So copy and paste the current route,
1:43
And we'll add :ID to our
URL here in the GET method.
1:52
Notice that each quote in our array
of quotes has a unique ID number.
1:58
The client will send along a request
containing the ID number of the quote
2:04
they want.
2:08
Remember the colon here is important
because it indicates that this is a URL
2:09
parameter.
2:14
When a request is sent to express,
2:14
it will take whatever is in this spot in
the URL and add it to the request object.
2:16
We can access that value using
request.params.whatever we've named
2:21
our parameter here, in this case id.
2:26
Let's console.log rec.params.id
to test this out.
2:28
Let's go back to the browser.
2:41
And if I make a request to quote/1,
2:43
You'll see the number 1
is logged to the console.
2:51
If I make a request to a jumble
of numbers and letters,
2:54
you'll see that that is
logged to the console.
2:59
So now I have access to the ID
number sent by the client.
3:03
We can now write some code that compares
the ID numbers sent to us by the client
3:06
with the ID numbers of
the quotes in our array.
3:10
We can compare these ID
numbers to find a match.
3:13
We can store that match in a variable, and
3:26
send that quote back
to the client as JSON.
3:29
Don't worry too much about this code.
3:39
The basic concept to remember is that
we're retrieving data from a data store
3:41
and sending it to the client as JSON.
3:45
There are a lot of ways to do that, and
3:47
we'll see more throughout
the rest of this course.
3:48
But basically we're saying,
3:51
look at the quotes array using
JavaScript's built-in find method.
3:52
For each quote,
3:57
compare the quote's ID number to the ID
number sent to us by the client.
3:58
And FYI,
we're using a double equals here because
4:02
the parameter is a string
while the quote is a number.
4:05
If there is a quote ID that
matches the requested ID,
4:08
the find method will
automatically return it.
4:11
And then we're saving the found
quote to a variable called quote.
4:14
Finally we're sending the requested
quote to the client as JSON.
4:17
Let's save and test this.
4:22
One.of quote has an ID of 8721.
4:24
Go back to the browser and
go localhost3000/quotes/8721.
4:27
And you can see we’re returned
the quote with the ID of 8721.
4:32
That’s the request
response cycle in Express.
4:40
Using the browser, we’re sending a GET
request to our Express server with the ID
4:43
number of the quote we’re looking for.
4:47
In our code,
4:49
we're using rec.params.id to access
the ID number from the client request.
4:50
We're then using that ID number
to find the correct quote and
4:56
send it back to the client as JSON.
4:59
We've talked about what an API is and
why you might want to use one,
5:01
as well as reviewed some important
concepts for using Express.
5:05
We've learned how to take in a client
request and respond with JSON data.
5:09
In the next part of the course,
5:13
we'll talk about sensible ways
to persist data for our API.
5:14
Build functionality so
that the client can add new quotes, and
5:17
discuss how to communicate effectively
with the client using HTTP status codes
5:20
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