take data from webpage as nextedform to mongodb using node js

Albin N J - Mar 31 '23 - - Dev Community

my webpage as html :



Select Unit

Choose...
St Thomas
St Aloyous
St Alphonse



House Name
id="houseName">


Phone Number
id="phoneNo">
        <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

. . .
Terabox Video Player