在数组中构造 formData

Question

我有一个广泛的表格，我正在尝试组织它，以便它对我打算使用它的计划仍然可行。

显示我的表单的示例：

<input type="text" name="data[0][name]">
<input type="email" name="data[0][email]">
<input type="tel" name="data[0][phone]">

<input type="text" name="data[1][name]">
<input type="email" name="data[1][email]">
<input type="tel" name="data[1][phone]">

我希望这个 return 为：

 - data
    - data[0]
       - data[name]
       - data[email]
       - data[phone]
    - data[1]
       - data[name]
       - data[email]
       - data[phone]

但是 new FormData(form); 然后 Object.fromEntries(formData) 我只是在不同的行上获取它（作为一个大数组）。

谁能帮我用一种简单的方法以动态方式转换这些，因为在我的实际设置中我有几十个字段。所以手动不是我想要的选项。

谢谢！

Answer 1

我认为没有标准的方法可以做到这一点。您可以尝试找到现有的解决方案，将 FormData 转换为 JSON (https://www.google.com/search?q=formdata+to+json+npm), you can refer to solutions from , or you can find inspiration e.g. in https://github.com/therealparmesh/object-to-formdata 并写入反向操作。您的解决方案的复杂性将取决于您的数据的复杂性和解决方案所需的性能。

Answer 2

要将（单层）NodeList 表单元素转换为嵌套对象，使用表单元素名称组件，可以遍历数据表单元素：

const dataform_obj = {} // instantiate empty object

// specify regular expression to capture name components
// for example: data[0][email]
const dataform_re = /^([^\[]+)(\[\d+\])(\[[^\]]+\])$/;

// convert form elements into array then loop
[...document.querySelector('#dataform').elements].forEach(function (elem) {

    // capture name components
    const match = elem.name.match(dataform_re);
    // match[1] is first name, match[2] is index, match[3] is last name
    // for example, ["data", "0", "email"]

  // instantiate sub-objects if do not exist
  if ( !dataform_obj[match[1]] ) { 
    dataform_obj[match[1]] = {}; 
  }
  if ( !dataform_obj[match[1]][match[1] + match[2]] ) { 
    dataform_obj[match[1]][match[1] + match[2]] = {}; 
  }

  // assign element value to object
  dataform_obj[match[1]][match[1] + match[2]][match[1] + match[3]] = elem.value;
})

上面，一个javascript regular expression 用来捕获表单元素名称的各个组成部分。然后使用这些组件构建对象层次结构。

console.log(dataform_obj);

...产生：

data: {
  data[0]: {
    data[email]: "",
    data[name]: "",
    data[phone]: ""
  },
  data[1]: {
    data[email]: "",
    data[name]: "",
    data[phone]: ""
  }

在线示例：https://jsfiddle.net/n4m32wzh/

也许，这就是您真正要寻找的格式：

data: {
  0: {
    email: "",
    name: "",
    phone: ""
  },
  1: {
    email: "",
    name: "",
    phone: ""
  }
}

这样做：

const dataform_obj = {};
const dataform_re = /^([^\[]+)\[(\d+)\]\[([^\]]+)\]$/;

[...document.querySelector('#dataform').elements].forEach(function (elem) {

  const match = elem.name.match(dataform_re)

  if ( !dataform_obj[match[1]] ) { 
    dataform_obj[match[1]] = {}; // <-- this level can alternatively be an array using [] instead of {} since the component is a number
  }
  if ( !dataform_obj[match[1]][match[2]] ) { 
    dataform_obj[match[1]][match[2]] = {}; 
  }

  dataform_obj[match[1]][match[2]][match[3]] = elem.value;
});
console.log(dataform_obj["data"])

在线示例：https://jsfiddle.net/gnav6qb4/2/

如果你已经有一个 FormData 对象，你可以这样循环：

const dataform = new FormData(document.querySelector('#dataform'));
[...dataform.entries()].forEach(function (elem) {
  // elem is an array: [element name, element value]
  //...

在数组中构造 formData

Structure formData in an array

javascript

arrays

forms

form-data