处理Express表单中的输入数组？ [英] Handling input arrays in Express forms?

问题描述

假设我必须在同一页面上编辑一批相同类型的对象：

  //  -  jade 
 form（action =''，method ='POST'）
为messages_ids中的每个message_id 
 input（type ='text'，name ='message'，id ='＃{message_id }'）
 input（type ='text'，name ='author'，id ='＃{message_id}'）
 input（type ='submit'，value ='Send'）
  

我知道我不能在后端处理这种表单，因为id - 它不会被发送到后端。但是，有没有办法做到这一点？我想在后端得到这样的东西：

  // js 
 for（var i = 0; i< = req.body.message.length; i ++）{
 console.log（
'ObjectID：'+ req.body.message [i] .id，//  - ？null，just以显示我想要得到
'消息：'+ req.body.message [i]，
'作者：'+ req.body.author [i] 
）; 
} 
  

它是伪代码（它不会工作）。那么，有什么想法？

我得到如何做到这一点没有AJAX

解决方案

对于 bodyParser.urlencoded 扩展选项设置为 true ，则格式属性的属性名称 bodyParser 中间件将解释为

  {property：nestedPropert：$ value} 
  

只要确保初始化中间件像这样：

  app.use（bodyParser.urlencoded（{extended：true}）; 
  

然后，更改上面的表单声明，让message属性成为一个对象，而不是字符串值，如下所示：

$ b $

  form（action =''，method ='POST'）
 
  -  for（var i = 0; i < messages_ids.length; i ++）
  -  var message_id = messages_ids [i] 
 //  - 因此我们将每个索引视为`message`的属性
 input（type = 'text'，name ='messages [＃{i}] [message]'）
 input（type ='text'，name ='messages [{＃{i}}] [author]'）
 input（type ='hidden'，name ='messages [＃{i}] [id]'，value ='＃{message_id}'）
 
 input（type ='submit'，值='发送'）
  

然后，在服务器端，请求.body.messages 会是一个对象，如下所示：

  {
消息：{
1：{
message：$ message1，
author：$ author1，
id：$ id1 
} ，
2：{
message：$ message2，
author：$ author2，
id：$ id2 
} / *， ... * / 
} 
} 
  

然后，您可以轻松将 request.body.messages 转换为数组：

  var messages = Array.prototype.slice.call（request.body.messages）; 
  

现在，您应该可以像访问每个元素一样访问每个元素（注意：我更喜欢实用的风格，但我会保持与你的一致）：

  for（var i = 0; i< messages.length; i ++）{
 console.log（{$ b $'ObjectId'+ messages [i] .id，
'Message'+ messages [i] .message，
'Author'+消息[i] .author 
}）; 
 
 
 
 
 
 
 PS：如果你想知道功能风格，那么这里是： 
 
 
  messages.forEach（function（message）{
 console.log（
'ObjectId'+ message.id，
'Message'+ message.message，
'Author'+ messages.author 
）; 
}）; 
  
 编辑：特别感谢@eye_mew，指出我们需要将扩展设置为 true 。
 
Let's say I have to edit a batch of objects of the same type on the same page:
//-jade
form(action='', method='POST')
    for each message_id in messages_ids
        input(type='text', name='message', id='#{message_id}')
        input(type='text', name='author',  id='#{message_id}')
    input(type='submit', value='Send')
I know I wont be able to process such form on backend 'cause of id -- it wont be sent to backend. However, is there a way to do it? I'd like to get something like this on backend:
//js
for (var i = 0; i <= req.body.message.length; i++) {
    console.log (
        'ObjectID: ' + req.body.message[i].id, //-? null, just to show what I'm trying to get
        'Message: '  + req.body.message[i],
        'Author: '   + req.body.author[i]
    );
}
It's pseudocode (it wont work). So, any ideas?

P.S. I'm getting how to do this without AJAX
解决方案
For bodyParser.urlencoded, if you set the extended option to true, attribute names of the format property[nestedProperty] will be interpreted by the bodyParser middleware as:
{ property: nestedPropert: $value }
Just be sure to initialize the middleware like so:
app.use(bodyParser.urlencoded({ extended: true });
Afterwards, change the above form declaration to have the message property be an object, instead of a string value, like so:
form(action='', method='POST')

    - for (var i = 0; i < messages_ids.length; i++)
        - var message_id = messages_ids[i]
        //- so we're treating each index like a property of `message`
        input(type='text', name='messages[#{i}][message]')
        input(type='text', name='messages[{#{i}}][author]')
        input(type='hidden', name='messages[#{i}][id]', value='#{message_id}')

    input(type='submit', value='Send')
And then, on the server side, request.body.messages would be an object, that looks like:
{
  "messages": {
    "1": {
      "message": $message1,
      "author": $author1,
      "id": $id1
    },
    "2": {
      "message": $message2,
      "author": $author2,
      "id": $id2
    } /* , ... */
  }
}
And then, you can easily convert request.body.messages into an array:
var messages = Array.prototype.slice.call(request.body.messages);
And now, you should be able to access each elements like so (note: I prefer a functional style, but I'll keep it consistent with yours):
for (var i = 0; i < messages.length; i++) {
  console.log({
    'ObjectId' + messages[i].id,
    'Message' + messages[i].message,
    'Author' + messages[i].author
  });
}
P.S.: if you're wondering of a functional style, then here it is:
messages.forEach(function (message) {
  console.log(
    'ObjectId' + message.id,
    'Message' + message.message,
    'Author' + messages.author
  );
});
Edit: special thanks to @eye_mew for pointing out that we need to set extended to true.

                        
这篇关于处理Express表单中的输入数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！