take data from webpage as nextedform to mongodb using node js
Tags: node, mongodb, javascript
Published: 2023-03-31 10:47:38

my webpage as html :

<form action="/admin" method="POST" class="row g-4" id="addUser">
            <div class="col-md-4">
                <label for="inputState" class="form-label">Select Unit</label>
                <select id="inputState selectUnit" name="unit" class="form-select border-success">
                    <option selected>Choose...</option>
                    <option>St Thomas</option>
                    <option>St Aloyous</option>
                    <option>St Alphonse</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="inputEmail4" class="form-label">House Name</label>
                <input type="text" class="form-control border-success" placeholder="House Name" name="houseN"
                    id="houseName">
            </div>
            <div class="col-md-4">
                <label for="inputPassword4" class="form-label">Phone Number</label>
                <input type="number" class="form-control border-success" placeholder="Phone Number" name="phoneN"
                    id="phoneNo">
            </div>

            <span class="border border-black mx-auto p-2" id="memberDetail" name="memberDetails">
                <div class="row g-4" id="memberDetails">
                    <div class="col-md-4">
                        <label for="inputEmail4" class="form-label">Name</label>
                        <input type="text" class="form-control border-success" placeholder="name" name="memberDetails[0][name]"
                            id="fName">
                    </div>
                    <div class="col-md-4">
                        <label for="inputEmail4" class="form-label">Relation</label>
                        <input type="text" class="form-control border-success" placeholder="Relation" name="memberDetails[0][relation]"
                            id="relation">
                    </div>
                    <div class="col-md-1">
                        <label for="inputPassword4" class="form-label">Age</label>
                        <input type="number" class="form-control border-success" placeholder="Age" name="memberDetails[0][age]" id="age">
                    </div>
                    <div class="col-md-2">
                        <label for="inputPassword4" class="form-label">Baptism Date</label>
                        <input type="date" class="form-control border-success" name="memberDetails[0][bDate]" id="bDate">
                    </div>
                    <div class="col-md-2">
                        <label for="inputPassword4" class="form-label">Date of Birth</label>
                        <input type="date" class="form-control border-success" name="memberDetails[0][dob]" id="dob">
                    </div>
                    <div class="col-md-2">
                        <label for="inputPassword4" class="form-label">Abroad or Not</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input border-success" type="radio" name="abroad" id="abroadyes"
                                value="yes">
                            <label class="form-check-label" for="inlineRadio1">Yes</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input border-success" type="radio" name="abroad" id="abroadno"
                                value="no">
                            <label class="form-check-label" for="inlineRadio2">No</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="inputEmail4" class="form-label">Place Name</label>
                        <input type="text" class="form-control border-success" placeholder="Place Name" name="placeName"
                            id="placeName">
                    </div>
                </div>
            </span>
            <button type="button" class="btn btn-primary" id="addMember">Add Member</button>
            <div class="col-12">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>my model schema :

import mongoose from "mongoose";

const memberSchema = new mongoose.Schema({ name: { type: String, required: true }, relation: { type: String, required: true }, age: { type: Number, required: true }, baptismDate: { type: Date }, dateOfBirth: { type: Date }, abroad: { type: Boolean }, placeName: { type: String } })

const UserSchema = new mongoose.Schema({ unit: { type: String, required: true }, houseN: { type: String, required: true }, phoneN: { type: Number, required: true }, memberDetails: [ memberSchema ] })

export default mongoose.model("User", UserSchema)

my node js post method : export const createData = async (req, res) => { const newUser = new User({ unit: req.body.unit, houseN: req.body.houseN, phoneN: req.body.phoneN, memberDetails: req.body.memberDetails }); try { const savedUser = await newUser.save() console.log(savedUser); res.redirect("/") } catch (err) { res.status(500).send({ message: err.message || "Some error occurred" }) } }

postman result : {
		"_id": "64268018764e488064f78eb9",
		"unit": "St Thomas",
		"houseN": "Nellissery",
		"phoneN": 1234567890,
		"memberDetails": [
			{
				"name": "Angel",
				"age": 22,
				"bDate": "10/09/2000",
				"dob": "10/09/2000",
				"abroad": "no",
				"_id": "64268018764e488064f78eba"
			},
			{
				"name": "Albin",
				"age": 22,
				"bDate": "10/09/2000",
				"dob": "10/09/2000",
				"abroad": "no",
				"_id": "64268018764e488064f78ebb"
			}
		],
		"__v": 0
	}
i con't add data from webpage to mongodb using post method and form in nexted form. there is housename,phonenumber and name,dob,age should repeat when clicking add feild and it all store as array of object