How to post data in MongoDB using NodeJS

Step 1: Create a New Directory: At first create a new directory for your project and navigate into it.

mkdir Your_folder_name
cd Your_folder_name

Step 2: Initialize a New Node.js Project: After that, you have to Initialize a new node project using npm.

npm init -y

Step 3: Install required packages: Then install the the required package using npm.

npm install express mongoose ejs

Step 4: Require Mongoose: After that in your NodeJS application, you need to require Mongoose.

const mongoose = require('mongoose');

Step 5: Call the connect method : Then you need to call the mongoose connect mothod to connect it.

const mongoose = require('mongoose');

const url = 'mongodb://localhost:27017/userData';

const connectDB = async () => {
try {
await mongoose.connect(url, {

});
console.log('Database is connected');
} catch (err) {
console.error('Error connecting to the database:', err);
process.exit(1);
}
};

Step 6: Then Define a schema : A schema is a structure, that gives information about how the data is being stored in a collection.

const userSchema = new Schema({
name: {
type: String,
required: true,
},
email:{
type:String,
required:true,
},
mobile:{
type: Number,
required: true,
},
age: {
type: Number,
required: true,
},
});

//Here you can add some more data as your need.

Project Structure

Folder structure

The updated dependencies in package.json file will look like:

 "dependencies": {
"ejs": "^3.1.10",
"express": "^4.19.2",
"mongoose": "^8.3.4"
}

Example: Below is the code example of how to post data in mongodb using node js

HTML
<!-- view/index.ejs !-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            max-width: 400px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }

        p {
            color: #666;
            text-align: center;
            margin-bottom: 20px;
        }

        form {
            text-align: center;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: #333;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        button {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        button {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .message {
            color: green;
            text-align: center;
            margin-bottom: 20px;
        }

        .error {
            color: red;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to our website!</h1>
        <p>This is a simple form to save user data to the database.</p>
        <form id="userForm" action="/user" method="post" 
              onsubmit="return validateForm()">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" >
            <label for="email">Email Id:</label>
            <input type="email" id="email" name="email" >
            <label for="mobile">Mobile No:</label>
            <input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}">
            <label for="age">Age:</label>
            <input type="number" id="age" name="age" >
            <button type="submit">Submit</button>
        </form>
        <% if (message) { %>
            <p class="message"><%= message %></p>
        <% } else if (error) { %>
            <p class="error"><%= error %></p>
        <% } %>
    </div>

    <script>
        function validateForm() {
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var mobile = document.getElementById("mobile").value;
            var age = document.getElementById("age").value;

            if (name === "" || email === "" || mobile === "" || age === "") {
                alert("Please fill out all fields.");
                return false;
            }

            if (!/^[0-9]{10}$/.test(mobile)) {
                alert("Please enter a valid 10-digit mobile number.");
                return false;
            }

            return true;
        }
    </script>
</body>
</html>
JavaScript
//server.js

const express = require('express');
const connectDB = require('./database/db');
const userRoutes = require('./routes/userRoutes');

const app = express();
const port = 3000;

// Connect to the database
connectDB();

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

// Set the view engine to EJS
app.set('view engine', 'ejs');
app.set('views', './views');

// Routes
app.use('/', userRoutes);

// Start the server
app.listen(port, (err) => {
    if (err) {
        console.log(err);
    } else {
        console.log(`Server is started at port ${port}`);
    }
});
JavaScript
// databse/db.js

const mongoose = require('mongoose');
const url = 'mongodb://localhost:27017/userData';
const connectDB = async () => {
    try {
        await mongoose.connect(url, {
           
        });
        console.log('Database is connected');
    } catch (err) {
        console.error('Error connecting to the database:', err);
        process.exit(1);
    }
};

module.exports = connectDB;
JavaScript
//model/model.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const userSchema = new Schema({
    name: {
        type: String,
        required: true,
    },
    email: {
        type: String,
        required: true,
    },
    mobile: {
        type: Number,
        required: true,
    },
    age: {
        type: Number,
        required: true,
    },
});

const User = mongoose.model('User', userSchema);

module.exports = User;
JavaScript
// routes/userRoutes.js

const express = require('express');
const User = require('../model/model');
const router = express.Router();


// GET route for the home page
router.get('/', (req, res) => {
    res.render('index', { message: null, error: null });
});

// POST route for adding a user
router.post('/user', async (req, res) => {
    try {
        const newUser = new User({
            name: req.body.name,
            email: req.body.email,
            mobile: req.body.mobile,
            age: req.body.age,
        });
        await newUser.save();
        res.render('index', { message: 'User data saved successfully!' });
    } catch (err) {
        console.error('Error saving user data:', err);
        res.status(500).render('index', { error: 'Error saving user data' });
    }
});

module.exports = router;

To run the code write in the command prompt.

node server.js

And open a new tab of your browser and type the following command to show the output.

http://localhost:3000/

Output

Database Output:

How to Post Data in MongoDB Using NodeJS?



How to Post Data in MongoDB Using NodeJS?

In this tutorial, we will go through the process of creating a simple Node.js application that allows us to post data to a MongoDB database. Here we will use Express.js for the server framework and Mongoose for interacting with MongoDB. And also we use the Ejs for our front end to render the simple HTML form.

Similar Reads

Prerequisites

NPM & NodeJSMongoDB...

Steps on How to post data in MongoDB using NodeJS

Step 1: Create a New Directory: At first create a new directory for your project and navigate into it....

Contact Us