LabEx
ВходРегистрация

Преобразование формы в объект

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы изучим, как с помощью JavaScript преобразовать набор элементов формы в объект. Мы будем использовать конструктор FormData и метод Array.from() для создания массива данных формы. Затем мы будем использовать метод Array.prototype.reduce() для сбора данных формы в объект. В конце этого практического занятия у вас будет лучше понимание, как собирать и организовывать данные формы с использованием JavaScript.

Преобразование формы в объект

Для практики программирования откройте Терминал/SSH и введите node. Вы можете закодировать набор элементов формы в виде объекта, выполнив следующие шаги:

  1. Используйте конструктор FormData для преобразования HTML-формы (form) в FormData.
  2. Преобразуйте FormData в массив с использованием Array.from().
  3. Соберите объект из массива с использованием Array.prototype.reduce().

Ниже представлен пример кода:

const formToObject = (form) =>
  Array.from(new FormData(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

Для преобразования определенной формы вы можете вызвать функцию formToObject и передать в качестве аргумента элемент формы:

formToObject(document.querySelector("#form"));
// { email: 'test@email.com', name: 'Test Name' }

Резюме

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