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

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]

[...document.querySelectorAll('form [name]')].reduce((obj, el) => {
  const path = el.name.match(/\w+/g);
  const key = path.pop();
  path.reduce((acc, n) => acc[n] ||= {}, obj)[key] = el.value;
  return obj;
}, {})

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 не бывает никаких вложенных полей, все эти квадратные скобки в именах полей это для бэекенда, их не нужно разбирать - сам бэкенд их переделает в объект со вложенными свойствами.

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