Retrieve/fetch data from mongoDB database + mongoose in node js express app and display html; Through this tutorial, you will learn how to fetch/retrieve data from mongodb database + mongoose in node js express app and display in html ejs
This tutorial will create a table using bootstrap 4 library. Then create a route and import in app.js file to fetch data from mongodb in node js express and display in html ejs.
How to Fetch Data From mongodb in Node js and Display in HTML (ejs)
- Step 1 – Create Node Express js App
- Step 2 – Install express flash ejs body-parser mongoose dependencies
- Step 3 – Connect App to MongoDB
- Step 4 – Create Model
- Step 5 – Create Routes
- Step 6 – Create HTML Table and Display List
- 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 mysql 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
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/test', {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("list", {
data: docs
});
} else {
console.log('Failed to retrieve the Course List: ' + err);
}
});
});
module.exports = router;
Step 6 – Create HTML Table and Display List
Create html form 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 data from mongodb using node js and display in html</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="/customers" class="btn btn-info ml-3">Fetch data from mongodb using node js and display in html</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>
</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>
</tr>
<% }
}else{ %>
<tr>
<td colspan="3">No user</td>
</tr>
<% } %>
</tbody>
</table>
</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');
});
// port must be set to 3000 because incoming http requests are routed from port 80 to port 8080
app.listen(3000, function () {
console.log('Node app is running on port 3000');
});
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
Fetch data from mongodb in node js express using mongoose express app; In this tutorial, you have learned how to fetch and display data in html list form mongoDB database using mongoose node js express app.
