Как преобразовать данные формы во вложенный объект?

Question

[Александр Маджугин]

Вдруг понял, что до сих пор не знаю универсального работающего решения.
Просто взять форму и просто получить объект с данными из этой формы.

К примеру, есть форма:

<form>
    <label>
        <input type="text" name="GROUP1[NAME]">
    </label>
    <label>
        <input type="text" name="GROUP2[EMAIL]">
    </label>
    <label>
        <input type="text" name="GROUP2[PHONE]">
    </label>
    <label>
        <input type="text" name="GROUP2[CITY]">
    </label>
    <label>
        <textarea type="text" name="GROUP1[TEXT]"></textarea>
    </label>
</form>

Хочу получить на выходе:

{
    GROUP1 {
        NAME: 'значение',
        TEXT: 'значение'
    },
    GROUP2 {
        EMAIL: 'значение',
        PHONE: 'значение',
        CITY: 'значение'
    },
}

Не url кодированную строку, не FormData, не плоский список, а просто объект, который я могу бы получить скажем из массива $_POST на сервере.

Comments

[Алексей Ярков]

из этой формы

Интрига

[Александр Маджугин]

Алексей Ярков, и что не понятно?

Answer 1

[0xD34F]

const data = Array.prototype.reduce.call(
  document.querySelector('form').elements,
  (acc, n) => {
    const keys = n.name.match(/\w+/g);
    const key = keys.pop();
    keys.reduce((p, c) => p[c] ??= {}, acc)[key] = n.value;
    return acc;
  },
  {}
);

UPD. Вынесено из комментариев:

Для

<input type="text" name="iuowye[rrr][]" value="1">
<input type="text" name="iuowye[rrr][]" value="2">
<input type="text" name="iuowye[rrr][]" value="3">

работать не будет.

const data = Array
  .from(document.querySelectorAll('form [name]'))
  .reduce((acc, { name, value }) => {
    const keys = name.match(/\w+|\[\w*\]/g).map(n => n.replace(/^\[|\]$/g, ''));
    const key = keys.pop();
    const isArr = !key;
    const values = keys.reduce((p, c, i, a) => {
      return p[c] ??= (i === a.length - 1 && isArr ? [] : {});
    }, acc);
    values[isArr ? values.length : key] = value;
    return acc;
  }, {});

Comments

[Александр Маджугин]

Для

<input type="text" name="iuowye[rrr][]" value="1">
<input type="text" name="iuowye[rrr][]" value="2">
<input type="text" name="iuowye[rrr][]" value="3">

работать не будет.

Но для моего локального случае подходит, да - спасибо.

P.S.
А от чего все так стали любить const? (я бэкэндщик, если что)

[Danya Kozlovskiy]

Александр Маджугин, ES6

[Александр Маджугин]

Danya Kozlovskiy, не - я в курсе что это и как работает и насчет области видимости тоже в курсе.
Тут вопрос - профит какой?

[Danya Kozlovskiy]

Александр Маджугин, код проще читается

Answer 2

[Алексей Ярков]

Если просто, то вот так:

const form = document.querySelector('form');
const data = new FormData(form);

for (let entry of data) {
	console.log(entry);
}

Comments

[Александр Маджугин]

Вы правда думаете что я про FormData не знаю? Да, формально это объект и как ответ формально подходит.

Ладно - я устал под конец дня и плохо сформилуровал вопрос - обновил.

[Алексей Ярков]

Александр Маджугин,

Вы правда думаете что я про FormData не знаю?

Я хз про что вы знаете, а про что нет ))

Answer 3

[Надим]

Если на сайте есть jQuery то ваша проблема решается в одну строку:
https://api.jquery.com/serializeArray/

Функция serializeArray делает из формы объект:

$('form').serializeArray(); // Вытащит данные из формы в виде объекта

Comments

[Александр Маджугин]

Да, а потом с помощью map разобрать. Но это подходит только для "плоских форм", без вложенных структур.
А как решить задачу для любой формы?
Вопрос обновил.

[Надим]

Александр Маджугин, с точки зрения JS не бывает никаких вложенных полей, все эти квадратные скобки в именах полей это для бэекенда, их не нужно разбирать - сам бэкенд их переделает в объект со вложенными свойствами.

Но если вам все же это надо именно на фронте сделать, то тут решение только одно, писать свой парсер.