Preview
Video Player
00:00
00:00
GET a Quote, GET all Quotes
5:25Learn how to set up an Express route that provides an endpoint to get the list of quotes and a specific quote.
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