将 FormData 转换为对象列表

Question

我有一个表单，其中一组字段重复几次。然后，此表单作为 FormData (https://developer.mozilla.org/en-US/docs/Web/API/FormData) 发送到后端。

我当前的解决方案是像这样命名表单中的字段：

<input name="firstname" />
<input name="lastname" />
<input name="firstname" />
<input name="lastname" />

然后在后端，我可以将 FormData 转换为对象数组，如下所示：

const firstnames = formData.getAll('firstnames')
const lastnames = formData.getAll('lastnames')
const persons = []

for (let i = 0; i < firstnames.length; i++) {
    persons.push({
       firstname: firstnames[i],
       lastname: lastnames[i]
     })
}

由于这似乎是一个非常标准的场景，我只是猜测我没有走上将表单数据转换为这样的对象列表的正确轨道。这怎么办？

Answer 1

现在您有了更多“人”，最好将数据发送为

application/json

。您可以使用

<fieldset>

组合输入元素。字段集有一个名为

elements

的属性——该字段集中所有输入元素的列表。因此，您可以按其名称 (

person

) 循环所有字段集，创建一个对象，并将其添加到数组中。然后你可以对数组进行 Stingify 并将其发送到后端作为

application/json

。

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let form = e.target;
  
  // loop all fieldsets
  let data = [...form.person].map((person, i) => {
    return {
      'firstname': person.elements.firstname.value,
      'lastname': person.elements.lastname.value
      };
  });
  
  // send the form data object
  fetch(form.action, {
    method: form.method,
    headers: {
      'content-type': 'application/json'
    },
    body: JSON.stringify(data)
  });
});

<form name="form01" method="post" action="https://reqres.in/api/users">
  <fieldset name="person">
    <input name="firstname">
    <input name="lastname">
  </fieldset>
  <fieldset name="person">
    <input name="firstname">
    <input name="lastname">
  </fieldset>
  <fieldset name="person">
    <input name="firstname">
    <input name="lastname">
  </fieldset>
  <button>Submit</button>
</form>