在表单上表示正文解析器处理复选框数组 [英] Express body-parser handling checkbox arrays on forms
问题描述
我有一个带有复选框数组的HTML表单（使用 [] 命名）。我需要能够使用 express 来处理这个问题。我正在使用 body-parser 。
I have an HTML form with an array of checkboxes (using [] naming). I need to be able to process this with express. I'm using body-parser.
问题是未选中的复选框不提交值，同时 body-parser 似乎删除了漏洞在数组中，只需按索引的顺序将值打包到数组中，但忽略索引本身。 （更新：实际上看起来像 qs 是罪魁祸首）。
The problem is that unchecked checkboxes don't submit a value, and at the same time, body-parser seems to remove "holes" in arrays by simply packing the values into an array in order of indices, but ignoring the indices themselves. (Update: Actually it looks like qs is the culprit).
考虑这个完整的例子，它显示一个表格并用提交数据的JSON转储作出回应：
Consider this full example, which displays a form and responds with a JSON dump of the submitted data:
安装：
npm install express body-parser
index.js：
var express = require("express");
var site = express();
site.use(require("body-parser").urlencoded({extended:true}));
site.get("/", function (req, res) {
res.sendFile(__dirname + "/test.html");
});
site.post("/form", function (req, res) {
res.json(req.body);
});
site.listen(8081);
test.html：
test.html:
<html>
<body>
<form method="post" action="/form">
<input type="checkbox" name="option[0]" value="1">
<input type="checkbox" name="option[1]" value="1">
<input type="checkbox" name="option[2]" value="1"><br>
<input type="text" name="text[0]"><br>
<input type="text" name="text[1]"><br>
<input type="text" name="text[2]"><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
在该示例中，如果我只检查选项[1] ，我通过检查Chrome中的请求验证索引是否设置正确，正文是：
In that example, if I were to check only option[1], I verify that the index is set correctly by inspecting the request in Chrome, body is:
option[1]:1
text[0]:
text[1]:
text[2]:
然而，body-parser会折叠选项数组，并在 req.body ：
Yet body-parser collapses the option array and produces the following in req.body:
{"option":["1"],"text":["","",""]}
如您所见， text 有三个，但选项只有一个项目。同样，如果我要检查选项[0] 和选项[2] ，请求正文如下所示：
As you can see, text has all three, but option has only one item. Similarly, if I were to check option[0] and option[2], the request body would look like:
option[0]:1
option[2]:1
text[0]:
text[1]:
text[2]:
但它会是解析为：
{"option":["1","1"],"text":["","",""]}
我丢失了有关选中了哪个复选框的所有信息。
I lose all information about which checkbox was checked.
我的问题是，我该怎么做？我想要发生的事情是，例如：
My question is, how do I do this? What I want to happen is, e.g.:
-
使用
复选框[1]选中：
{"option":[null,"1",null],"text":["","",""]}
使用复选框[0] 和复选框[2] 已选中：
{"option":["1",null,"1"],"text":["","",""]}
我实际上并没有嫁给 null 和1，我只需要假装一个nd truthy。
I'm not actually married to null and "1", I just need falsey and truthy.
此外，重要的是我不会丢失有关应该在数组中的复选框的信息。例如，如果我给每个复选框一个唯一的值，我想我可以将option：[0，1] 转换为一个布尔数组值，除了我会失去数组大小为3的知识（在这种情况下第3个值为false） - 虽然我想我可以添加例如一个隐藏的输入，比如 numberOfCheckboxes = 3 ，但是......这种映射很麻烦，如果可能的话我想避免使用它。
Also, it is important that I not lose information about how many checkboxes should be in the array. For example, if I were to give each checkbox a unique value, I suppose I could translate "option":["0","1"] into an array of boolean values, except I would lose the knowledge that the array is of size 3 (with the 3rd value false in that case) -- although I guess I could add e.g. a hidden input like numberOfCheckboxes=3, but... this kind of mapping is cumbersome and I'd like to avoid it if possible.
推荐答案
我的方法在客户端不需要javascript。
添加与具有相同名称的复选框一样多的隐藏字段
My approach requires no javascript on client side. Add hidden fields as many as your checkboxes with same names
正文解析器将已检查的项目解析为数组和字符串其他
body parser will parse checked items as array and string others
我的意思是
<input type="hidden" name="option[0]" value="0">
<input type="hidden" name="option[1]" value="0">
<input type="hidden" name="option[2]" value="0">
<input type="checkbox" name="option[0]" value="1">
<input type="checkbox" name="option[1]" value="1">
<input type="checkbox" name="option[2]" value="1">
如果选中[1]选项，那么正文解析器会像
If your option[1] is checked then body parser will parse it like
{option:['0', ['0', '1'], '0']}
这里是修饰语
req.body.option = req.body.option.map(item => (Array.isArray(item) && item[1]) || null);
所以现在身体将是
{option: [null, '1', null]}
这篇关于在表单上表示正文解析器处理复选框数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
