Update data by id into mongoDB database with mongoose in node js express app; This tutorial will guide you on how update data into mongodb database using mongoose module in node js express.
This tutorial will create a table using bootstrap 4 library and display list with the edit button. Then create a routes and import in app.js file to fetch and update data from mongodb in node js express app.
How to Update Data into mongodb in Node js with Mongoose
- Step 1 – Create Node Express js App
- Step 2 – Install express flash validator ejs body-parser mongoose dependencies
- Step 3 – Connect App to MongoDB
- Step 4 – Create Model
- Step 5 – Create Routes
- Step 6 – Create Views
- Create List Page
- Create Edit Page
- Step 7 – Import Modules in App.js
- Step 8 – Start App Server
Step 1 – Create Node Express js App
Execute the following command on terminal to create 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 make it available under req.body property. In other words, it simplifies the incoming request.
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 database.js file into 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 + '<br>'
})
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 views directory of your app and create list.ejs and edit.js file into it.
Create List Page
Create html markup for display list from mongodb database; So visit views directory and create 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 html form for display edit user data into mongodb database; So visit views directory and create 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 5 – 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 7 – Start App Server
You can use the following command to start 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
Conclusion
Node js update data into mongodb using mongoose; In this tutorial, you have learned how to how update data into mongodb database using moongose in node js express app.
