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;

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

我正在尝试使用标准jQuery来处理几个相关的表单输入。到目前为止我所尝试的无济于事是以下几点：

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

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

$("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函数（显然，它只有在元素所在的情况下才能正常工作） <input ... name="example[key]" ... />格式，但我离题了。

这个函数被称为：

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开头的所有输入字段。使用.get()，您可以将jQuery结果转换为可以应用.reduce()的数组：

＆＃13;

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);

＆＃13;

<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"/>

＆＃13;

使用HTML输入'name'属性生成一个Object

1 个答案: