This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Save and Delete Content in Express with HTTP Verbs

7:04 Node.js lesson by

In this lesson you will learn how to support data modification by handling HTTP verbs besides GET. We will look at how to edit, save, and delete content with .put and .delete.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson you will learn how to support data modification by handling HTTP verbs besides GET.

Avatar
Martin

I'm sure if it's deliberate, but it's like you skipping over the part surrounding the getUser function. I seems straightforward, but there's no real description to the change from the list to the actual user files. At least not what I can see.

Avatar
Ben

Woah, you're right. Sorry about that!

In reply to Martin
Avatar
Vishwas

The tutorials going great but missing out on the utility functions and how they handling data throws me off and I can't follow as I am trying to build the app following the video.

Avatar
Stefan

Hey, i found one problem if i start my server with "npm dev" from your previous lectures, not load a user picture because server restarting and not return picture. Do you have a solution about it ?

Avatar
Ben

Hi Stefan,

I'm not seeing that issue.What action in the app is causing the server to restart? If it's editing a user, one thing you could try is changing the dev script to tell nodemon to ignore the users directory. nodemon index.js --ignore users/.

Hope that helps,
Ben

In reply to Stefan
Avatar
Stefan

Thanks for your answer, now this working good.

In reply to Ben
Avatar
Jaclyn

I agree! I like the project & am learning how routing works but there are some roadblocks that might not be necessary for the learning to keep moving forward.

The comment was 7 months ago so I'll just reiterate... I am constantly having to go to the github repo to see what functions were being built or refactored. It's a good practice in reading the code and seeing what's happening when but a detriment in following the video. WRiting the code with you in the video is not sufficient because there are gaps in what is being built and what is shown. A short heads up on 'so I built this getUser function to fix this problem' would be super helpful. Same thing with the users photos - I didn't clone the repo for this lesson down because I wanted to start from scratch to learn so it would be helpful to have a heads up and say, 'hey, get a collection of photos that you want to use so you can learn to display photos with your user'

In reply to Martin
Avatar
Joel

The packaged version of nodemon in the repo only watches js by default, but I ran a more recent nodemon (because didn't clone the repo) where nodemon watches .json as well by default, so I had the same issue as Stefan reported of nodemon restarting when .json files where modified or removed.

The workaround nodemon index.js --ignore users/ didn't work for me though, nodemon seems to want the --watch flag to watch a file, so: nodemon --watch index.js. Or nodemon --ignore users/ or nodemon --ignore .json would work as well.

In reply to Ben

In addition to serving data and pages, Express also supports other HTTP verbs besides Get that will let you actually modify data. To show that, we have updated our user name route here, and we've now got a Res.render call that is going to pass in a user object and an address object.

We have updated our template so that we've got a nice little link back to the list of users, we've got the profile picture was we are going to use -- the medium one now, and we've got a couple of links there, edit and delete. Then below that, in our actual content, we've got a definition list.

In that list, you'll see that you have two DD tags for each aspect of the address, one that just displays the data, and the other one that actually has an input tag in it. Essentially, that's going to let us do some in-place editing.

This is what our template looks like in the browser. If we come back here and we actually look at our "Edit" link, the edit link calls an edit function.

What the edit function does is, it's going to show everything that has a class of in it, and hide everything that has a class of view, and we've got a cancel function here that does just the opposite. Those two functions are what let us toggle between the in-place editing and just the regular view.

If we click on edit, we get the edit form. If we click "Cancel," it'll get rid of that foreman just go back to displaying the data. Where we actually get into modifying data is the say function, so when we click on the "Save" button, it's going to call this save function.

This is just going to call to the path that matches our user name that we're looking at now. Then, the important part here is the method property, which is set to put, so that's going to do an HTTP put, and it's going to send this data back. That's just the value of all those input fields that we have, and then finally when the call returns, it's going to call this complete call back, which is going to cancel.

It's going to call cancel, which is really just getting rid of our edit form, and that we are going to reload the page so that we can see the new data loaded into the browser there. Now, if we go to our page and open the edit form and hit save, it's going to refresh.

But if we look at the terminal here, we can see that we actually got some error output. That's because we're not actually handling that put verb, and in order to handle it in a meaningful way, we actually need to go install something called body parser, which is going to let us do exactly what it sounds like and parse the body of the request.

We are going to require that package in here, in our file, so we've got a property called BodyParser now. We're going to configure our application to use it. So then, we're going to say App.UseBodyParser.URL encoded, because our data is going to be URL encoded by the form, by default.

Then extended true is just telling it to do all the parsing that it can. And then, we can come down here and actually define our Put handler. So, App.Put this time instead of App.Get, still using the same username mount path. Then what we're going to do is we are going to pull off that username like we have before.

We're going to get that user's data, using a little utility function that we've got in here, and then we are going to say User.Location equals Request.Body. So, Request.Body is going to be this data object that is getting passed back from our form, and we're just going to set that onto our user object directly, and then we're going to call SaveUser, which is essentially just going to rewrite that file back out.

Then we're going to end the request by saying Response.End. If we start our dev circuit back up, we can go back to the browser and we'll refresh this page, and then go ahead and initiate an edit, and then we will change Alan's address to be New York, California.

Then we'll hit "Save," and you can see that the page did refresh there, and we can even, just to show that it works, we can go back to the user's list, come back to Alan, and we see that he does have that address. We can go look at our JSON file here and see that it was written out to that file.

The last type of action we're going to implement here is a delete. So we've got a delete link, which calls this function called DEL, you've always got to be careful about naming things delete on the client side, because it's a reserved word.

But this function is going to call, again, the same username URL. But this time, the method is going to be set to delete. We don't need to send any data with it, but when the call is complete, we're just going to go back to the route pass, so we're going to go back to our list of users.

If we go back into our express code, we can define an app.delete this time, and give it that same username "Path." This time, we are going to get the path to that user's file, and delete that file. Then we're going to send back a 200 status letting the client know that the request completed successfully.

If we go here and click "Delete," it's going to take us back, but we still see Alan in the list there. If we try and click on him, we're going to get an error because that file is not actually there. We can't load the data. The reason for that is that we are loading this list of users when the application starts up, and then we're just serving it from the route.

There's no way for that data to be reloaded while the app is running. What we actually need to do is we'll go up and delete this code that runs at app startup, and right here within the route handler we're just going to paste in some code that will define our users array.

We're going to read the users directory, so it's going to get all the files that are actually in that directory. We'll loop over the files, we'll read them in and we'll parse out the data, set the full name they have been using, push that user object back into our array, and then once we know that we have the right amount of users defined or loaded, then we'll go ahead and render that index page.

We can go back and refresh. If we go into Daryl here and say, "Delete," it takes us back to that list, and you can see Daryl is in fact missing from the list.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?