node.jsformsbackendejsreq

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


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' } 
  }
}

Solution

  • 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.