CRUD in Node.js

Logic behind Update

Almost all programmers will have to interact with CRUD(Creating new items, Read, Update, and Deleting existing items) in their applications. As I implemented it in an application, CRD was relatively straight forward but I had a bit of trouble with the Update. May be someone will find this helpful. I use MongoDB, Node.js and handlebars in this article.

Update

This can be tricky if you would like your update function to be convenient for the user. That is, the original content should appear in the form so that the user can edit it; Instead if recreating all the information. From personal experience, no one likes recreating everything they wrote, rather the old content is displayed and you work with that.

Update exeriment, OpenLabs
Update experiment view, taken from the open labs project

How can you do this??

This can be achieved in two steps.

Step 1: Reading the old content from the database and displaying them in the form.

Reading the content from the database

router.post('/details', function(req, res, next) {

    var id = req.body.lab;

    Lab.findById(id, function (err, doc) {
        if (err){
            console.log('No entry found');
        } else {
            res.render('editExperiment', { doc: doc});
        }
    });
});

Displaying the values in the update form

<h4 class="">Update Experiment</h4>
<div class="col-md-8 col-md-offset-2">
    <form role="form" action="/labs/update" method="POST">
        <input type="hidden" name="lab" value="{{doc._id}}">
        <div class="input-group">
            <span class="input-group-addon">Title</span>
            <input type="text" class="form-control" name="title" value="{{doc.title}}" required>
        </div><br>
        <div class="input-group">
            <span class="input-group-addon">Category</span>
            <input type="text" class="form-control" name="category" value="{{doc.category}}" required>
        </div> <br>
        <div class="input-group">
            <span class="input-group-addon">Data URL</span>
            <input type="text" class="form-control" name="url" value="{{doc.url}}" required>
        </div><br>
        <button class="btn btn-sm btn-primary" type="submit">Update</button>
    </form>
</div>

Step 2: Saving the new values in the space occupied by the old values

router.post('/update', function(req, res, next) {

    var id = req.body.lab;

    Lab.findById(id, function (err, doc) {
        if (err){
            console.log('No entry found');
        }
        doc.title = req.body.title;
        doc.category = req.body.category;
        doc.url = req.body.url;
        doc.save();
    });
    res.redirect('/');
});

And thats how it is done! In case you want to see the rest of the code, check out https://github.com/iLabs-Makerere/OpenLabs-Node.js/blob/master/routes/labs.js my github repository.

Take away from this:

One of the things I actually understood today was the value of the hidden input type. It can be very helpful in passing values like ids. Check out my comment here http://stackoverflow.com/a/42904481/5342220

Code isn’t complicated, you just need to put the complexities into perspective and logic.

In case this helps, please leave a comment!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s