Чтобы преобразовать массив полей формы в массив объектов с использованием JavaScript и `FormData`, можно воспользоваться методом `Array.from()` или `spread operator` для получения массива пар ключ-значение из объекта `FormData`. Затем вам нужно будет обработать эти пары и собрать данные в нужном вам формате.
Вот как это можно сделать:
```javascript
function formDataToObject(formData) {
const data = {};
// Используем FormData для получения массива пар [ключ, значение]
for (const [key, value] of formData.entries()) {
// Проверяем, если ключ уже существует в объекте data
if (data[key]) {
// Если существует, проверяем, является ли это массивом
if (Array.isArray(data[key])) {
// Если это массив, добавляем новое значение
data[key].push(value);
} else {
// Если нет, создаем массив и добавляем существующее значение и новое
data[key] = [data[key], value];
}
} else {
// Если ключ не существует, просто присваиваем значение
data[key] = value;
}
}
return data;
}
// Пример использования
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Остановить стандартное поведение формы
const formData = new FormData(form);
const data = formDataToObject(formData);
console.log(data);
});
```
### Объяснение решения:
1. **Использование `FormData`**: Создается объект `FormData` из формы, который автоматически собирает все поля формы и их значения.
2. **Цикл `for...of`**: Итерируемся по записям (парам ключ-значение) в объекте `FormData`.
3. **Проверка наличия ключа**: Если ключ уже присутствует в `data`, мы проверяем его тип:
- Если это массив — добавляем новое значение.
- Если это не массив — создаем массив, в который помещаем существующее значение и новое.
4. **Присвоение значения**: Если ключ отсутствует, просто присваиваем значение.
### Пример формы:
Добавим форму, которую можно использовать для тестирования:
```html
<form>
<input type="text" name="list[label]">
<input type="text" name="list[label]">
<button type="submit">Submit</button>
</form>
```
### Пример вывода:
Если пользователь введет в оба поля формы "Test1" и "Test2", `data` будет выглядеть следующим образом:
```javascript
{
"list[label]": ["Test1", "Test2"]
}
```
Таким образом, вы сможете получить значения с индексированными ключами, аналогичными тому, как это делается в PHP.