Node js MongoDB Update Data Using Mongoose Tutorial

Nov 25, 2022

.

Admin

Node js MongoDB Update Data Using Mongoose Tutorial

Hello Friends,

This tutorial will provide an example of node js MongoDB update data using the mongoose tutorial. I would like to share with your the update or edit data in MongoDB using node.js. I explained simply how to use update() in mongoose. I’m going to show you about updating documents in mongoose.

This tutorial will create a table using the bootstrap 4 libraries and display a list with the edit button. Then create a route and import it in app.js file to fetch and update data from MongoDB in node js express app.

Step 1: Create Node Express js App


Execute the following command on the terminal to create the node js app:

mkdir my-app

cd my-app

npm init -y

Step 2: Install express flash ejs body-parser mongoose Modules

Execute the following command on the terminal to express flash ejs body-parser mongoose dependencies:

npm install -g express-generator

npx express --view=ejs

npm install

npm install express-flash --save

npm install express-session --save

npm install body-parser --save

npm install mongoose

npm install express-validator cors --save

body-parser – Node.js request body parsing middleware which parses the incoming request body before your handlers, and makes it available under req.body property. In other words, it simplifies incoming requests.

Express-Flash – Flash Messages for your Express Application. Flash is an extension of connect-flash with the ability to define a flash message and render it without redirecting the request.

Express-Session– Express-session – an HTTP server-side framework used to create and manage a session middleware.

Express-EJS– EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages

Mongoose – Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

Step 3: Connect App to MongoDB

Create a database.js file in your app root directory and add the following code into it to connect your app to the MongoDB database:

var mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/users', {useNewUrlParser: true});

var conn = mongoose.connection;

conn.on('connected', function() {

console.log('database is connected successfully');

});

conn.on('disconnected',function(){

console.log('database is disconnected successfully');

})

conn.on('error', console.error.bind(console, 'connection error:'));

module.exports = conn;

Step 4: Create Model

Create Models directory and inside this directory create userModel.js file; Then add following code into it:

const mongoose = require("../database");

// create an schema

var userSchema = new mongoose.Schema({

name: String,

email:String

});

var userModel=mongoose.model('users',userSchema);

module.exports = mongoose.model("Users", userModel);

Step 5: Create Routes

Create routes; so visit routes directory and open users.js route file; Then add the following routes into it:

var express = require('express');

var router = express.Router();

var mongoose = require('mongoose');

var userModel = require('../models/userModel');

/* GET home page. */

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

userModel.find((err, docs) => {

if (!err) {

res.render("users/list", {

data: docs

});

} else {

console.log('Failed to retrieve the Users List: ' + err);

}

});

});

// SHOW EDIT USER FORM

router.get('/edit/(:id)', function(req, res, next){

userModel.findById(req.params.id, (err, doc) => {

if (!err) {

res.render("users/edit", {

title: "Update User Details",

data: doc

});

}else{

req.flash('error', 'User not found with id = ' + req.params.id)

res.redirect('/users/list')

}

});

})

// EDIT USER POST ACTION

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

req.assert('name', 'Name is required').notEmpty() //Validate nam

req.assert('email', 'A valid email is required').isEmail() //Validate email

var errors = req.validationErrors()

if( !errors ) {

var user = {

name: req.sanitize('name').escape().trim(),

email: req.sanitize('email').escape().trim()

}

userModel.findByIdAndUpdate(req.body.id,

{name:req.body.name} {email:req.body.email}, function(err, data) {

if(err){

req.flash('error', 'Something Goes to Wrong!');

res.render('users/list');

}

else{

req.flash('success', 'User has been updated successfully!');

res.redirect('/users');

}

});

}

else { //Display errors to user

var error_msg = ''

errors.forEach(function(error) {

error_msg += error.msg + '
'

})

req.flash('error', error_msg)

/**

* Using req.body.name

* because req.param('name') is deprecated

*/

res.render('users/edit', {

title: 'Edit user',

id: req.params.id,

name: req.body.name,

email: req.body.email

})

}

})

module.exports = router;

Step 6: Create Views

Create some views; so visit the views directory of your app and create a list.ejs and edit.js file into it.

Create List Page

Create HTML markup for display list from MongoDB database; visit the views directory and create a list.ejs file inside it. Then add the following code into it:

<!DOCTYPE html>

<html>

<head>

<title>Fetch and display data in hmtl table in node js express</title>

<link rel='stylesheet' href='/stylesheets/style.css' />

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head>

<body>

<div> <a href="/" class="btn btn-primary ml-3">Home</a> </div>

<!-- <% if (messages.error) { %>

<p style="color:red"><%- messages.error %></p>

<% } %> -->

<% if (messages.success) { %>

<p class="alert alert-success mt-4">

<%- messages.success %>

</p>

<% } %>

<br>

<table class="table">

<thead>

<tr>

<th scope="col">#</th>

<th scope="col">Name</th>

<th scope="col">Email</th>

<th width="200px">Action</th>

</tr>

</thead>

<tbody>

<% if(data.length){

for(var i = 0; i< data.length; i++) {%>

<tr>

<th scope="row">

<%= (i+1) %>

</th>

<td>

<%= data[i].name%>

</td>

<td>

<%= data[i].email%>

</td>

<td> <a class="btn btn-success edit" href="../users/edit/<%= data[i]._id%>">Edit</a> </td>

</tr>

<% }

}else{ %>

<tr>

<td colspan="3">No user</td>

</tr>

<% } %>

</tbody>

</table>

</body>

</html>

Create Edit Page

Create an HTML form for displaying edit user data in the MongoDB database; visit the views directory and create an edit.ejs file inside it. Then add the following code into it:

<!DOCTYPE html>

<html>

<head>

<title>node js edit data mongodb database - tutsmake.com</title>

<link rel='stylesheet' href='/stylesheets/style.css' />

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head>

<body>

<form action="/users/update/<%= data._id %>" method="post" name="form1">

<div class="form-group">

<label for="exampleInputPassword1">Name</label>

<input type="text" class="form-control" name="name" id="name" value="<%= data.name %>" placeholder="Name"> </div>

<div class="form-group">

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="Enter email" value="<%= data.email %>"> </div>

<button type="submit" class="btn btn-info">Update</button>

</form>

</body>

</html>

Step 7: Import Modules in App.js

Import express flash session body-parser mongoose dependencies in app.js; as shown below:

var createError = require('http-errors');

var express = require('express');

var path = require('path');

var cookieParser = require('cookie-parser');

var logger = require('morgan');

var bodyParser = require('body-parser');

var flash = require('express-flash');

var session = require('express-session');

var usersRouter = require('./routes/users');

var app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

app.use(logger('dev'));

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

app.use(session({

secret: '123456catr',

resave: false,

saveUninitialized: true,

cookie: { maxAge: 60000 }

}))

app.use(flash());

app.use('/list', usersRouter);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

// set locals, only providing error in development

res.locals.message = err.message;

res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page

res.status(err.status || 500);

res.render('error');

});

module.exports = app;

Step 8: Start App Server

You can use the following command to start the node js app server:

//run the below command

npm start

after run this command open your browser and hit

http://127.0.0.1:3000/list

I hope it can help you...

#Node JS