Как конвертировать массив полей 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 formData = {
  get: form =>
    Array.prototype.reduce.call(form.elements, (acc, n) => {
      const [ keys, k, isCheckbox, isRadio ] = formData._parseElement(n);
      const values = keys.reduce((p, c, i, a) => {
        return p[c] ??= (-~i !== a.length || k ? {} : []);
      }, acc);

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

      return acc;
    }, {}),

  set: (form, data) =>
    Array.prototype.forEach.call(form.elements, function(n) {
      const [ keys, k, isCheckbox, isRadio ] = formData._parseElement(n);
      const values = keys.reduce((p, c) => p?.[c], data);
      const key = (isCheckbox || k) ? k : `${this[n.name] = -~(this[n.name] ?? -1)}`;

      if (values instanceof Object && (!key || Object.hasOwn(values, key))) {
        const v = key ? values[key] : values;

        n[(isCheckbox || isRadio) ? 'checked' : 'value'] =
                     isRadio ? v ===      n.value  :
          (isCheckbox && !k) ? v.includes(n.value) :
                               v;
      }
    }, {}),

  _parseElement(el) {
    const keys = Array.from(el.name.matchAll(/\w+|\[(\w*)\]/g), n => n[1] ?? n[0]);
    return [ keys, keys.pop(), el.type === 'checkbox', el.type === 'radio' ];
  },
};

https://jsfiddle.net/htxb56v8/

Comments

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

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

[ksnk]

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

[0xD34F]

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

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

0xD34F,
подскажите а то у меня ошибки UNDEFINE для object

const form = document.getElementById('module-form');

const getFormData = form =>
  Array.prototype.reduce.call(
    form.elements,
    (acc, n) => {
     ...
    },
    {}
  );

у меня определяется переменная с содежимым формы. Но в Вашем скрипте тоже в атрибутах функции указывается form.
И мне не понятно, каким именем мне нужно определять форму, ведь у Вас имя формы является атрибутом.
Наверно Вы допустили ошибку и form => надо удалить

[0xD34F]

Наверно Вы допустили ошибку и form => надо удалить

Конечно допустил. Я же дурак и ничего не знаю. А вы умный и меня поправляете.

Чего я тут точно делать не буду - так это учить вас языку. Пример использования представленной функции есть по ссылке в песочнице. Смотрите, думайте.

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

0xD34F, Извините меня. Бывают люди делают опечатку. А поправлял я Вас не для того, чтобы учить, а для того, чтобы этот паблик кому-нибудь принёс пользу в будущем.
Ссылка с трудом открылась https://jsfiddle.net/a9bctor5/1/ наверно провайдер шалит.
По Вашему коду понял как эта функция вызывается.
Да уж самому стыдно, что не разлядел как функция эта вызовается с атрибутом формы.
Мне страшно представить как выглядит то что чудик вроде меня спрашивает то что не знает а потом учит знающего, на дебилизм похоже с моей стороны. Но я действительно, хотел чтобы паблик этот был полезен другим, а что то не понятное для меня и не работающим(то что недопонял), хотел поправить на то что понятное и работающее.
Стыдно просить, но быть может подскажите как обратный процесс сделать.

let arrayNames = getNames(document.queryElement('select,input,textarea'));

[0xD34F]

"Обратный процесс" - имея вложенный объект, разложить его значения по элементам формы? Ответ обновил.

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

0xD34F, спасибо за помощь.