Как конвертировать массив полей FORM/формы в массив полей объекта JS?

Question

[Сергей Кореневский]

<form id=data ... >
<input name=list[label][]  value=Машина>
<input name=list[label][]  value=Дом>
<input name=list[cost][]  value=123>
<input name=list[cost][]  value=321>
</form>

закидываю форму в FormData Объект и получаю имена полей не как массив, а как строки.

fd = new FormData(document.getElementById(data));
console.log(fd);

0: "list[label][]" → "Машина"​​
1: "list[cost][]" → "123"​​
2: "list[label][]" → "Дом"​​
3: "list[cost][]" → "321"​​

Мы видим что каждое второе значение имеет одинаковый ключ.

let data = {}
fd.forEach((value, key) => data[key] = value);
console.log(data );

То получаем всего 2 значения в объекте DATA

data {
0: "list[label][]" → "Дом"
1: "list[cost][]" → "321"
}

Как сделать чтобы объект data содержал все значения полей с нумерованными ключами?
как это получается по аналогии на PHP $_GET[list][label][0] и $_GET[list][label][1]т.е. по нумерованному ключу массива можно получить значения а не в виде строки.

Answer 1

[0xD34F]

const getFormData = form =>
  Array.prototype.reduce.call(
    form.elements,
    (acc, n) => {
      const isCheckbox = n.type === 'checkbox';
      const isRadio = n.type === 'radio';
      const keys = Array.from(n.name.matchAll(/\w+|\[(\w*)\]/g), n => n[1] ?? n[0]);
      const key = isCheckbox ? null : keys.pop();
      const isArr = !key;
      const values = keys.reduce((p, c, i, a) => {
        return p[c] ??= (-~i === a.length && isArr ? [] : {});
      }, acc);

      if (!isCheckbox || n.checked) {
        values[isArr ? values.length : key] ??= !isRadio || n.checked ? n.value : null;
      }

      return acc;
    },
    {}
  );

https://jsfiddle.net/a9bctor5/

Comments

[Сергей Кореневский]

Круто! Спасибо.
Но вообще странно что form передаёт не сервер многомерный массив, а в js только объект с одинаковыми строковыми ключами. Очень странно. Спасибо большое за помощь, надеюсь будет полезно другим.
Сложный код написали. Как бы по отдельности понятно. Регулярки и общую логику я бы не смог так написать. думаю раза в 4 - 5(и более) было бы больше кода у меня.

[ksnk]

С радио и чекбоксами тоже справляется ?

[0xD34F]

ksnk, справляется, но некорректно. То есть, теперь корректно - ответ обновил.