Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll add functionality to our app that will allow the client to edit quotes.
Let's write an update route to
edit an already existing quote.
0:00
A put request indicates to
our application that a change
0:04
is going to be made to
an existing resource.
0:07
We're going to handle put requests
to the /quotes/:id route.
0:09
We're going to use await
inside this callback, so
0:22
we'll indicate that this
function is asynchronous.
0:24
Now we'll need a trycatch block.
0:31
Into the catch block, we can just copy and
0:39
paste the same error from
above in our post route.
0:42
Inside the try block,
we'll use the updateQuote function.
0:49
Go ahead and
hover over the updateQuote function.
0:55
You can see it accepts one parameter,
0:58
an object containing the content
that we wanna update the quote with.
1:00
So we'll expect the client to send us
an object containing the author and
1:04
quote text to replace the current values.
1:08
The client will send a request
containing the new object,
1:11
the endpoint of the quote
that they wish to change.
1:13
Much like we did in
the get /quotes/:id route,
1:16
we'll first retrieve the quote
using records.getQuote.
1:20
And passing it the id of
the quote we're looking for,
1:25
which is available via req.params.id.
1:28
So records.getQuote(req.params.id), and
1:33
we can save that to
a variable called quote.
1:37
Remember, we're going to pull
the id from the request and
1:42
feed it to the records.getQuote method.
1:46
The getQuote method will then return
to us the quote we're looking for,
1:49
saved in a variable called quote.
1:53
Also, we'll need to wait for
this code information to come back
1:56
before we move onto the next line of code,
so we can add await here.
1:59
We're nearly ready to use
the updateQuote function, but
2:04
first let's make sure
the requested resource exists.
2:07
In other words,
that the id points to a valid quote.
2:10
If the quote doesn't exist,
we'll send a 404 error.
2:17
And we'll send a message
that the quote wasn't found.
2:26
If getQuote has returned a valid quote,
we'll need to reassign the quote's quote
2:33
and author properties to reflect the new
information sent to us by the client.
2:37
Recall that we have access to this
new information via req.body.
2:43
So we have the quote we wanna change,
let's change it.
2:47
We'll set the quote object's
quote property equal to
2:49
the new quote property
sent to us by the client.
2:54
And we'll do the same with the author.
2:59
So here we're getting the new
information the client has sent us.
3:08
And we are reassigning the value of the
quote and author properties to match that.
3:11
Now that we've updated the quote,
3:17
we can pass the new quote
to the updateQuote method.
3:18
So let's go ahead and
copy and paste this up here.
3:22
And we can pass quote to
the updateQuote method.
3:26
The updateQuote method will save
the new quote to our data store.
3:31
This is an asynchronous function, so
we'll need to await this as well.
3:35
Now we'll need to send
some kind of response.
3:39
For a put request, it's convention to send
status code 204, which means no content.
3:42
This generally means that everything went
okay, but there's nothing to send back.
3:48
Up until now,
we've responded to requests with JSON,
3:56
but for put requests, it's convention
not to respond with anything.
3:59
The data store simply gets updated, and
4:03
we send back a status code indicating
that the update went as expected.
4:05
We need another way to end the request, or
the server will just hang indefinitely,
4:09
and our application will
appear to be broken.
4:14
We can end the request with
the Express end method,
4:16
which simply tells
Express that we're done.
4:19
Let's test this out in Postman by
editing the quote with an id of 8721.
4:23
We'll edit it by adding a Jr.
to the end of Martin Luther King.
4:29
So up here, change the method to PUT, and
4:33
we'll send the request to
localhost:3000/quotes/8721.
4:37
Click on Body, and then raw.
4:44
And here we'll send an object
with our request containing
4:47
an updated quote and author.
4:50
So I'm actually just going to copy and
paste this from below.
4:52
And add the Junior.
5:03
Go ahead and press Send.
5:04
And it looks like nothing happened,
but we did get a status of 204.
5:08
And if we go ahead and
take a look at our data.json file,
5:14
you can see that that has
been successfully changed.
5:17
So we're finding the quote by id,
5:21
taking the information the client has sent
us, and using it to update the quote.
5:24
Passing the new quote to
the updateQuote method to be saved.
5:29
In a more real-world situation,
5:33
you'd also wanna validate the information
the client has sent to you.
5:35
For example, has the client sent data for
all the required properties?
5:38
Is the data in the form your API is
expecting, like a string or a number,
5:42
and so on.
5:46
When you're using an ORM,
5:47
you'll most likely create data
models to do exactly that.
5:48
You define the shape of
your data in one place.
5:52
Which properties are required, which data
type each properties expect, and so on.
5:55
So our updateQuote route is working great,
let's move on to the delete route.
6:00
You need to sign up for Treehouse in order to download course files.
Sign up