javascript - 使用特定键获取表单输入数组的数据

Question

那么，假设我有一个如下所示的 HTML 表单:

<form id="myForm">
    <input type="text" name="dummy">
    <input type="text" name="people[0][first_name]" value="John">
    <input type="text" name="people[0][last_name]" value="Doe">
    <input type="text" name="people[1][first_name]" value="Jane">
    <input type="text" name="people[1][last_name]" value="Smith">
</form>

我想获得一个与 real 值匹配的 JavaScript 数组。例如:

// If there was a sweet function for this...
var people = getFormDataByInputName( 'people' );

// Value of `people` is...
// [
//    {
//        'first_name' : 'John',
//        'last_name'  : 'Doe'
//    },
//    {
//        'first_name' : 'Jane',
//        'last_name'  : 'Smith'
//    }
// ]

是否有任何简单的方法可以仅针对特定表单项(在本例中为 people)执行此操作？或者我是否必须序列化整个表单，然后提取我想要的元素？

我还考虑过使用以下方法:

var formData = new FormData( document.querySelector( '#myForm' ) );
var people = formData.get( 'people' );

但这似乎不起作用；之后 people 就为空。

Answer 1

您可以使用 reduce 方法使用纯 js 来完成此操作，并返回每个人都是一个对象。

const form = document.querySelectorAll('#myForm input');
const data = [...form].reduce(function(r, e) {
  const [i, prop] = e.name.split(/\[(.*?)\]/g).slice(1).filter(Boolean)
  if (!r[i]) r[i] = {}
  r[i][prop] = e.value
  return r;
}, [])

console.log(data)

<form id="myForm">
  <input type="text" name="dummy">
  <input type="text" name="people[0][first_name]" value="John">
  <input type="text" name="people[0][last_name]" value="Doe">
  <input type="text" name="people[1][first_name]" value="Jane">
  <input type="text" name="people[1][last_name]" value="Smith">
</form>