1
00:00:00,000 --> 00:00:03,395
Open up the project files,
if you don't have them open already.

2
00:00:03,395 --> 00:00:08,192
In this video we're going to write GET
routes using data stored in this variable

3
00:00:08,192 --> 00:00:12,426
named data, which contains an object
with an array of quote objects.

4
00:00:12,426 --> 00:00:15,067
If you've been following along with me,
you can copy and

5
00:00:15,067 --> 00:00:17,940
paste this data into your project
from the teacher's notes.

6
00:00:17,940 --> 00:00:21,909
Ideally we wouldn't want to keep our data
in this file with all the rest of our

7
00:00:21,909 --> 00:00:24,401
code, we'd wanna use
some kind of data store.

8
00:00:24,401 --> 00:00:29,513
This is most often going to be a database,
like PostgreSQL or MongoDB, but it

9
00:00:29,513 --> 00:00:34,640
could also be a JSON file or in our case
here just a regular JavaScript object.

10
00:00:34,640 --> 00:00:39,194
For now this JavaScript object is going
to serve as our data store, meaning we're

11
00:00:39,194 --> 00:00:43,290
going to pull quote information out of
it and send it to the client as JSON.

12
00:00:43,290 --> 00:00:46,533
The first item on our to-do
list is to create a route that

13
00:00:46,533 --> 00:00:51,304
responds to a GET request to the endpoint
/quotes with the entire list of quotes.

14
00:00:51,304 --> 00:00:53,505
To get started, I'll first copy and

15
00:00:53,505 --> 00:00:57,765
paste our existing GET route beneath
the first item on our to-do list.

16
00:01:01,535 --> 00:01:05,639
I'll then modify the GET method so
that it handles a route called /quotes.

17
00:01:08,980 --> 00:01:11,922
Inside the JSON method,
I'll pass the variable data,

18
00:01:11,922 --> 00:01:15,878
which is what we've named the variable
that contains our array of quotes.

19
00:01:21,668 --> 00:01:27,234
Now let's start up the server, And

20
00:01:27,234 --> 00:01:34,384
go to our browser, and
go to localhost3000/quotes.

21
00:01:34,384 --> 00:01:37,513
Excellent, we're getting back
a list of quotes as JSON.

22
00:01:37,513 --> 00:01:41,471
Let's add the ability to request and
receive a single quote.

23
00:01:41,471 --> 00:01:43,817
To do this, we'll add another GET route.

24
00:01:43,817 --> 00:01:45,693
So copy and paste the current route,

25
00:01:52,419 --> 00:01:58,194
And we'll add :ID to our
URL here in the GET method.

26
00:01:58,194 --> 00:02:01,990
Notice that each quote in our array
of quotes has a unique ID number.

27
00:02:04,479 --> 00:02:08,575
The client will send along a request
containing the ID number of the quote

28
00:02:08,575 --> 00:02:09,255
they want.

29
00:02:09,255 --> 00:02:14,088
Remember the colon here is important
because it indicates that this is a URL

30
00:02:14,088 --> 00:02:14,940
parameter.

31
00:02:14,940 --> 00:02:16,916
When a request is sent to express,

32
00:02:16,916 --> 00:02:21,424
it will take whatever is in this spot in
the URL and add it to the request object.

33
00:02:21,424 --> 00:02:26,221
We can access that value using
request.params.whatever we've named

34
00:02:26,221 --> 00:02:28,742
our parameter here, in this case id.

35
00:02:28,742 --> 00:02:32,806
Let's console.log rec.params.id
to test this out.

36
00:02:41,419 --> 00:02:43,041
Let's go back to the browser.

37
00:02:43,041 --> 00:02:46,602
And if I make a request to quote/1,

38
00:02:51,855 --> 00:02:54,840
You'll see the number 1
is logged to the console.

39
00:02:54,840 --> 00:02:59,353
If I make a request to a jumble
of numbers and letters,

40
00:02:59,353 --> 00:03:03,378
you'll see that that is
logged to the console.

41
00:03:03,378 --> 00:03:06,934
So now I have access to the ID
number sent by the client.

42
00:03:06,934 --> 00:03:10,876
We can now write some code that compares
the ID numbers sent to us by the client

43
00:03:10,876 --> 00:03:13,294
with the ID numbers of
the quotes in our array.

44
00:03:13,294 --> 00:03:16,081
We can compare these ID
numbers to find a match.

45
00:03:26,308 --> 00:03:29,438
We can store that match in a variable, and

46
00:03:29,438 --> 00:03:32,668
send that quote back
to the client as JSON.

47
00:03:39,019 --> 00:03:41,116
Don't worry too much about this code.

48
00:03:41,116 --> 00:03:45,167
The basic concept to remember is that
we're retrieving data from a data store

49
00:03:45,167 --> 00:03:47,111
and sending it to the client as JSON.

50
00:03:47,111 --> 00:03:48,729
There are a lot of ways to do that, and

51
00:03:48,729 --> 00:03:51,040
we'll see more throughout
the rest of this course.

52
00:03:51,040 --> 00:03:52,872
But basically we're saying,

53
00:03:52,872 --> 00:03:57,037
look at the quotes array using
JavaScript's built-in find method.

54
00:03:57,037 --> 00:03:58,017
For each quote,

55
00:03:58,017 --> 00:04:02,217
compare the quote's ID number to the ID
number sent to us by the client.

56
00:04:02,217 --> 00:04:05,248
And FYI,
we're using a double equals here because

57
00:04:05,248 --> 00:04:08,434
the parameter is a string
while the quote is a number.

58
00:04:08,434 --> 00:04:11,502
If there is a quote ID that
matches the requested ID,

59
00:04:11,502 --> 00:04:14,309
the find method will
automatically return it.

60
00:04:14,309 --> 00:04:17,690
And then we're saving the found
quote to a variable called quote.

61
00:04:17,690 --> 00:04:22,686
Finally we're sending the requested
quote to the client as JSON.

62
00:04:22,686 --> 00:04:24,630
Let's save and test this.

63
00:04:24,630 --> 00:04:27,826
One.of quote has an ID of 8721.

64
00:04:27,826 --> 00:04:32,533
Go back to the browser and
go localhost3000/quotes/8721.

65
00:04:32,533 --> 00:04:40,569
And you can see we’re returned
the quote with the ID of 8721.

66
00:04:40,569 --> 00:04:43,489
That’s the request
response cycle in Express.

67
00:04:43,489 --> 00:04:47,365
Using the browser, we’re sending a GET
request to our Express server with the ID

68
00:04:47,365 --> 00:04:49,310
number of the quote we’re looking for.

69
00:04:49,310 --> 00:04:50,263
In our code,

70
00:04:50,263 --> 00:04:56,089
we're using rec.params.id to access
the ID number from the client request.

71
00:04:56,089 --> 00:04:59,685
We're then using that ID number
to find the correct quote and

72
00:04:59,685 --> 00:05:01,737
send it back to the client as JSON.

73
00:05:01,737 --> 00:05:05,249
We've talked about what an API is and
why you might want to use one,

74
00:05:05,249 --> 00:05:09,150
as well as reviewed some important
concepts for using Express.

75
00:05:09,150 --> 00:05:13,150
We've learned how to take in a client
request and respond with JSON data.

76
00:05:13,150 --> 00:05:14,280
In the next part of the course,

77
00:05:14,280 --> 00:05:17,660
we'll talk about sensible ways
to persist data for our API.

78
00:05:17,660 --> 00:05:20,780
Build functionality so
that the client can add new quotes, and

79
00:05:20,780 --> 00:05:24,857
discuss how to communicate effectively
with the client using HTTP status codes