How to Fetch data from MongoDB Using Mongoose and Node.js Express

Fetch Data From MongoDB Using Mongoose: In this tutorial, you will learn to fetch data from MongoDB with a simple example. This example will give you the best idea to fetch other bulk data from the table. Even you will get a free script to implement it.

This tutorial helps you to write the script in the Express MVC pattern. Even all the script is written with a separate Model, View & controller file that will be very easy to understand. So, You will easily learn How to fetch data from MongoDB Using Mongoose Node.js Express.

Fetch Data From MongoDB Using Mongoose

Mongoose is the best solution to fetch MongoDB data. So, You should use it for writing the fetching query. Before getting started, you will have to configure required things to execute Node.js Express on your computer.

If you don’t know the basic configuration, you will not need to worry about it. you will get the reference in the next step to set up basic requirements.

Now, I’m going to explain this tutorial through the following steps:-

Basic Configuration

Before getting started to insert data into MongoDB using mongoose, you must do the following things:-

• Even, You must install Node.js or Express Application. You can learn it through the following URL

How to Install Express Application

• After Installing Express Application, Create MVC Pattern as the following structure.

myapp/
  |__bin/
  |__config/
  |     |__database.js
  |__controllers/
  |     |__user-controller.js
  |__models/
  |     |__user-models.js
  |__node_modules/
  |__public/
  |__routes/
  |     |__user-route.js
  |__views/
  |     |__user-data-list.ejs
  |__package-lock.json
  |__package.json

 

• You must connect MongoDB to Node.js using mongoose. you can learn it through the following URL.

Connect MongoDB with Node.js Using Mongoose

You can use the following mongoose script in Express to connect MongoDB to Node.js

File Path: config/database.php

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;

• First, You should insert data into MongoDB. If you don’t know, you can learn it through the following URL

 Insert Data Into MongoDB Using Mongoose and Express

Model – Write Mongoose Query to Fetch data from MongoDB

Now, do the following things to create a model for fetching  data from MongoDB

Load the mongoose module

var mongoose=require('mongoose');

Load the database module

var db = require('../config/database');

Create a schema with the same name as input fields name

// create an schema
var userSchema = new mongoose.Schema({
            fullName: String,
            emailAddress:String,
            city:String,
            country:String
        });

userTable=mongoose.model('users',userSchema);

Write the following script to execute the Fetch query.

module.exports={
fetchData:function(callback){
        var userData=userTable.find({});
        userData.exec(function(err, data){
            if(err) throw err;
            return callback(data);
        })
        
     }
}

Complete Script

File path: models/user-model.js

var mongoose=require('mongoose');
var db = require('../config/database');

// create an schema
var userSchema = new mongoose.Schema({
            fullName: String,
            emailAddress:String,
            city:String,
            country:String
        });

userTable=mongoose.model('users',userSchema);
        
module.exports={
     
     fetchData:function(callback){
        var userData=userTable.find({});
        userData.exec(function(err, data){
            if(err) throw err;
            return callback(data);
        })
        
     }
}

Controller – Load Model File to Fetch Data

Load the following  user-model.js in the controller

var userModel= require('../models/user-model');

Write the following script to  execute the model Query

module.exports={ 
fetchData:function(req, res){
      
      userModel.fetchData(function(data){
          res.render('user-data-list',{userData:data});
      })
  }
}

Complete Script:

File Path: controllers/user-controller.js

var userModel= require('../models/user-model');
module.exports={
 
    fetchData:function(req, res){
      
      userModel.fetchData(function(data){
          res.render('user-data-list',{userData:data});
      })
    }

}

View – Write HTML Code to Create Table

Write the following code to create an HTML Table and display data in it.

<table border="1" >
       <tr>
           <th>S.N</th>
           <th>Full Name</th>
           <th>Email Address</th>
           <th>City</th>
           <th>Country</th>
           <th>Edit</th>
           <th>Delete</th>
       </tr>
       
       <%
       if(userData.length!=0){
       var i=1;
       userData.forEach(function(data){
       %>
       <tr>
           <td><%=i; %></td>
           <td><%=data.fullName %></td>
           <td><%=data.emailAddress %></td>
           <td><%=data.city %></td>
           <td><%=data.country %></td>
           <td><a href="/user/edit/<%=data.id%>">Edit</a></td>
           <td><a href="/user/delete/<%=data.id%>">Delete</a></td>
       </tr>
       <%  i++; }) %>
       <% } else{ %>
           <tr>
               <td colspan="7">No Data Found</td>
           </tr>
       <% } %>
   </table>

 

Use the following CSS code to design the HTML Table

 * {
  box-sizing: border-box;}
.user-detail {
    height: 100vh;
    border: 2px solid #f1f1f1;
    padding: 16px;
    background-color: white;
    width: 30%;}
input{
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;}
input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;}
button[type=submit] {
    background-color: #434140;
    color: #ffffff;
    padding: 10px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    font-size: 20px;}
label{
  font-size: 18px;;}
button[type=submit]:hover {
  background-color:#3d3c3c;}
  .form-title a, .form-title h2{
   display: inline-block;
   
  }
  .form-title a{
      text-decoration: none;
      font-size: 20px;
      background-color: green;
      color: honeydew;
      padding: 2px 10px;
  }
    table, td, th {  
      border: 1px solid #ddd;
      text-align: left;
    }
    
    table {
      border-collapse: collapse;
      width: 50%;
     

    }
    .table-data{
        position: relative;
      left:50px;
      top:50px;
    }
    th, td {
      padding: 15px;
    }
body{
    overflow-x: hidden;
}
.list-title a, .list-title h2{
   display: inline-block;
   margin: 0px 35px;
  }
  .list-title a{
      text-decoration: none;
      font-size: 20px;
      background-color: green;
      color: honeydew;
      padding: 2px 10px;
  }

 

Complete HTML Code

File Path: views/user-form.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;}
.user-detail {
height: 100vh;
border: 2px solid #f1f1f1;
padding: 16px;
background-color: white;
width: 30%;}
input{
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;}
button[type=submit] {
background-color: #434140;
color: #ffffff;
padding: 10px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: 20px;}
label{
font-size: 18px;;}
button[type=submit]:hover {
background-color:#3d3c3c;}
.form-title a, .form-title h2{
display: inline-block;
}
.form-title a{
text-decoration: none;
font-size: 20px;
background-color: green;
color: honeydew;
padding: 2px 10px;
}
table, td, th {  
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 50%;
}
.table-data{
position: relative;
left:50px;
top:50px;
}
th, td {
padding: 15px;
}
body{
overflow-x: hidden;
}
.list-title a, .list-title h2{
display: inline-block;
margin: 0px 35px;
}
.list-title a{
text-decoration: none;
font-size: 20px;
background-color: green;
color: honeydew;
padding: 2px 10px;
}
</style>
</head>
<body>
<!--====form section start====-->
<div class="table-data">
<div class="list-title">
<h2>CRUD List</h2>
<a href="/user">CRUD From</a>
</div>
<br><br>
<table border="1" >
<tr>
<th>S.N</th>
<th>Full Name</th>
<th>Email Address</th>
<th>City</th>
<th>Country</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<%
if(userData.length!=0){
var i=1;
userData.forEach(function(data){
%>
<tr>
<td><%=i; %></td>
<td><%=data.fullName %></td>
<td><%=data.emailAddress %></td>
<td><%=data.city %></td>
<td><%=data.country %></td>
<td><a href="/user/edit/<%=data.id%>">Edit</a></td>
<td><a href="/user/delete/<%=data.id%>">Delete</a></td>
</tr>
<%  i++; }) %>
<% } else{ %>
<tr>
<td colspan="7">No Data Found</td>
</tr>
<% } %>
</table>
</div>
</body>
</html>

Route – Create & Load Route to Insert Data

Create Route:

Load  user-controller.js  using the following script

var userController= require('../controllers/user-controller');

Create the following route to fetch data

router.get('/data-list',userController.fetchData);

Complete route script:

File Path: routes/user-route

var express = require('express');
var router = express.Router();
var userController= require('../controllers/user-controller');
router.post('/create',userController.fetchData);
module.exports = router;

Load Route:

load user-route.js in the app.js

var userRouter = require('./routes/user-route');
app.use('/user', userRouter);

Enter the following URL into Browser to display Data

http://localhost:3000/user/data-list

 

Suggestion:

Dear developers, I hope you have understood the above script, Now you are able to Fetch data from MongoDB using Mongoose and Node.js express

I will share more tutorials on Node.js/Express asap. So, Continue to visit this website.

If you have any doubts or questions. You can directly ask me through the below comment box.