使用 HTML 输入“名称”属性生成对象

Question

在使用 body-parser 的 ExpressJS 中，存在将一组输入元素解析为 JavaScript 对象（或 JSON，我不完全确定）的功能具有与定义的键相同的名称属性。

HTML（例如）：

<input type="text" class="name" name="name[foo]" placeholder="input1"/>
<input type="text" class="name" name="name[bar]" placeholder="input2"/>

JavaScript（例如）：

var obj = req.body.name;

对象obj被JavaScript理解为{ "foo" : input1, "bar" : input2 }

我正在尝试使用标准 jQuery 获得类似的功能来处理多个相关的表单输入。到目前为止，我尝试过的（无济于事）如下：

$(".name") 生成一个包含文字 HTML 的 Object（对于获取键值对没有帮助）。

$(".name").map(function () {return $(this).val();}).get(); 产生一个 array 值，但没有键。

$("input[name='name']") 和 $("input[name='name[]']") 没有任何结果。

我还尝试了以下方法将输入转换为数组，但它仍然无法将信息从表单中提取为 JavaScript 对象/JSON：

$.fn.inputsToArray = function () {
  var values= [];
  $.each(this, function (i, field) {
    values.push(field.value);
  });
  return values;
};

没有 NodeJS / body-parser 有没有办法完成我想做的事情？

---

解决方案：

感谢gaetanoM 的出色解决方案（在下面接受），我能够创建一个可以在任何 jQuery 对象上调用的通用 jQuery 函数（显然，它只有在元素位于 @ 时才能正常工作987654331@ 格式，但我跑题了）。

函数是这样调用的：

var output = $(":input[name^=example]").inputsToObject();

函数定义如下：

$.fn.inputsToObject = function () {
  var values = {};
  values = $(this).get().reduce(function (acc, ele) {
    var key = ele.name.match(/\[(.*)\]$/)[1];
    acc[key] = $(ele).val();
    return acc;
  }, {})
  return values;
}

Answer 1

首先，您需要$(':input[name^=name]') 以选择所有具有以name 开头的name 属性的输入字段。使用.get()，您可以将 jQuery 结果转换为可以应用.reduce() 的数组：

var result = $(':input[name^=name]').get().reduce(function(acc, ele) {
    var key = ele.name.match(/\[(.*)\]$/)[1];  // get the key
    acc[key] = ele.getAttribute('placeholder'); // add to retval
    return acc;
}, {});
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" class="name" name="name[foo]" placeholder="input1"/>
<input type="text" class="name" name="name[bar]" placeholder="input2"/>