How to send a req.body with nested objects inside using a form

Question

In node, when using a form and an input, I can specify

<form action="/d/<%=project._id%>?_method=PUT" method="POST">
           <input class="part" name="content[main]">
</form>

And, with name="content[main]" I can achieve a req.body result that looks like this:

{
  content: { main: 'aaaa' }
}

Question: Is there a way to nest the name attribute like content[main[element]] ? I am trying to get a result similar to:

{
  content: { 
               main: { element: 'aaaa' } 
  }
}

Answer 1

I was having a similar problem.
I'm not good at explaining, not good at English either, so i just show you my code.

First of all, the conclusion was name="main[element]", not name="content[main[element]]"

Before

1. model.js

const userSchema = new mongoose.Schema(
  ...
  contact: {
      birth: {
        type: Date,
      },
      gender: {
        type: String,
      },
      email: {
        type: String,
      },
      phoneNumber: {
        type: Number
      },
    },
    completed: Boolean,
  }, {
    timestamps: true,
  }
);

2. user.js

let data = req.body;

const user = new User({
  userId: data.userId,
  password: data.password,
  userName: data.userName,
  contact: {
    birth: data.birth,
    gender: data.gender,
    email: data.email,
    phoneNumber: data.phoneNumber
  },
  completed: req.body.completed ? req.body.completed : false,
});

3. index.html

<form action="/api/create" method="POST" class="">
  <label for="">아이디</label>
  <input type="text" name="userId" />
  <label for="">비밀번호</label>
  <input type="password" name="password" />
  <label for="">이름</label>
  <input type="text" name="userName" />
  <label for="">생일</label>
  <input type="date" name="contact" />
  <label for="">남자</label>
  <input type="radio" value="male" name="contact" />
  <label for="">여자</label>
  <input type="radio" value="female" name="contact" />
  <label for="">이메일</label>
  <input type="email" name="contact" />
  <label for="">휴대전화</label>
  <input type="tel" name="contact" />
  <button type="submit">제출</button>
</form>

4.1 result

response message
  "message":"user validation failed: contact.phoneNumber: Path 
  `contact.phoneNumber` is required., contact.email: Path 
  `contact.email` is required., contact.gender: Path 
  `contact.gender` is required., contact.birth: Path 
  `contact.birth` is required."

4.2 console.log

{
  userId: '기린낙타오리',
  password: '123213',
  userName: '기린낙타',
  contact: [ '1333-03-03', 'male', '123123@12312', '123123' ]
}
// It is not inserted into the database.

after

1. model.js

No corrections

2. user.js

This code doesn't matter because data.nestedObject == data.contact has the same result, so the important thing is the html code

  const user = new User({
    userId: data.userId,
    password: data.password,
    userName: data.userName,
    contact: data.contact,
    birth: data.birth,
    gender: data.gender,
    email: data.email,
    phoneNumber: data.phoneNumber,
    completed: req.body.completed ? req.body.completed : false,
  });

3. index.html

I had to access the parent object, not the root object

name="main[element]"

The name property must required access to the parent object, not the root object.

    <form action="/api/create" method="POST" class="">
      <label for="">아이디</label>
      <input type="text" name="userId" />
      <label for="">비밀번호</label>
      <input type="password" name="password" />
      <label for="">이름</label>
      <input type="text" name="userName" />
      <label for="">생일</label>
      <input type="date" name="contact[birth]" />
      <label for="">남자</label>
      <input type="radio" value="male" name="contact[gender]" />
      <label for="">여자</label>
      <input type="radio" value="female" name="contact[gender]" />
      <label for="">이메일</label>
      <input type="email" name="contact[email]" />
      <label for="">휴대전화</label>
      <input type="tel" name="contact[phoneNumber]" />
      <button type="submit">제출</button>
    </form>

4. result

{
  userId: '기린낙타오리',
  password: 'znzntjaclzls',
  userName: '기린낙타',
  contact: {
    birth: '1999-05-13',
    gender: 'male',
    email: '123123@123123',
    phoneNumber: '12312312'
}
//It is insert into the database.