Node.js body-parser 不会解析 json 中带方括号的输入名称

Question

我在 Node.js

中遇到 Express 正文解析器问题

我有这样的输入：

<input id="personEmail1" type="email" name="person[0][email]" placeholder="Email1" class="form-control">
<input id="personEmail2" type="email" name="person[1][email]" placeholder="Email2" class="form-control">

在我提交表格后，我在 console.log:

中得到了这个

{ 'person[0][email]': 'info@sss.sss', 'person[1][email]': 'info@ggg.ggg' }

但我希望它以json格式解析：

{ person: [{email: 'info@sss.sss'}, {email: 'info@ggg.ggg'}] }

我做错了什么？

Answer 1

您正在正确使用 Express 主体解析器中间件括号表示法。但是，作为可以做什么的例子...

使用此视图：

<form method="post">
    <label for="person_email_1">Email address 1</label>
    <input id="person_email_1" name="person[0][email]" type="email" value="email1@example.com"> <br>

    <label for="person_email_2">Email address 2</label>
    <input id="person_email_2" name="person[1][email]" type="email" value="email2@example.com"> <br>

    <button type="submit">Submit v1</button>
</form>
<br>
<form method="post">
    <label for="person_email_1">Email address 1</label>
    <input id="person_email_1" name="person[email][0]" type="email" value="email1@example.com"> <br>

    <label for="person_email_2">Email address 2</label>
    <input id="person_email_2" name="person[email][1]" type="email" value="email2@example.com"> <br>

    <button type="submit">Submit v2a</button>
</form>
<br>
<form method="post">
    <label for="person_email_1">Email address 1</label>
    <input id="person_email_1" name="person[email]" type="email" value="email1@example.com"> <br>

    <label for="person_email_2">Email address 2</label>
    <input id="person_email_2" name="person[email]" type="email" value="email2@example.com"> <br>

    <button type="submit">Submit v2b</button>
</form>
<br>
<form method="post">
    <label for="person_email_1_address">Email address 1</label>
    <input id="person_email_1_address" name="person[emailAddresses][0][address]" type="email" value="email1@example.com">
    <input id="person_email_1_description" name="person[emailAddresses][0][description]" type="text" value="lorem ipsum 1"> <br>

    <label for="person_email_2_address">Email address 2</label>
    <input id="person_email_2_address" name="person[emailAddresses][1][address]" type="email" value="email2@example.com">
    <input id="person_email_2_description" name="person[emailAddresses][1][description]" type="text" value="lorem ipsum 2"> <br>

    <button type="submit">Submit v3</button>
</form>

...和这个 post 处理程序：

function postHandler(req, res) {
    console.log(JSON.stringify(req.body)); // show in console
    res.send(req.body); // show in browser
}

版本 1（您的版本，适合我，returns 您想要的结果）req.body：

{
  "person": [
    {"email": "email1@example.com"},
    {"email": "email2@example.com"}
  ]
}

版本 2a 和 2b（字符串数组，with/without 索引号）req.body:

{
  "person": {
    "email": [
      "email1@example.com",
      "email2@example.com"
    ]
  }
}

版本 3（对象数组）req.body:

{
  "person": {
    "emailAddresses": [
      {
        "address": "email1@example.com",
        "description": "lorem ipsum 1"
      },
      {
        "address": "email2@example.com",
        "description": "lorem ipsum 2"
      }
    ]
  }
}

我个人在 node/Express/jquery/Bootstrap 业务应用程序上使用了版本 2 和 3，个人或企业帐户可以拥有无限的电话号码、电子邮件地址和 URL。主体解析器括号表示法使它变得简单。

Answer 2

即使您为键使用了有效的 Javascript 语法，它们仍然只是字符串并且 no JSON 解析器将尝试调用 eval 在他们身上。

但是，JSON 已经有了数组的概念，它应该按照您期望的方式工作。

向我们展示调用 console.log 的代码会很有用。但我想相反，您需要重新考虑字段名称的命名约定。

<input id="personEmail1" type="email" name="personEmail1" placeholder="Email1" class="form-control">
<input id="personEmail2" type="email" name="personEmail2" placeholder="Email2" class="form-control">

然后根据该数据创建 Javascript 对象。

function handler(req, res) {
   var people = [
     { email: req.body.personEmail1 },
     { email: req.body.personEmail2 }
   ];

   console.log(people[0]); // person 1
   console.log(people[1]); // person 2
   console.log(people);    // both people
}

Answer 3

我使用此 https://github.com/macek/jquery-serialize-object 将我的表单序列化为 JSON。它按照我的需要解析数据，而且很容易使用。

    $.ajax({
      type: 'post',
      data: $form.serializeJSON(),
      contentType: 'application/json',
      url: $url,
      success: function (result) { ... }
    });

我认为这是最简单的

Answer 4

对于快速版本 4.x 当您需要手动安装 body-parser 和 multer，并且您希望从 post 中获取嵌套属性时，例如data[test]形式为req.body.data.test，需要设置：

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

Node.js body-parser 不会解析 json 中带方括号的输入名称

Node.js body-parser won't parse input names with square brackets in json

parsing

json

node.js

express

body-parser