Formulário para Objeto

Introdução

Neste laboratório, exploraremos como converter um conjunto de elementos de formulário em um objeto usando JavaScript. Faremos uso do construtor FormData e do método Array.from() para criar um array de dados de formulário. Em seguida, usaremos o método Array.prototype.reduce() para coletar os dados do formulário em um objeto. Ao final deste laboratório, você terá uma melhor compreensão de como coletar e organizar dados de formulário usando JavaScript.

Convertendo um Formulário em um Objeto

Para praticar a codificação, abra o Terminal/SSH e digite node. Você pode codificar um conjunto de elementos de formulário como um objeto usando as seguintes etapas:

1. Use o construtor FormData para converter o form HTML em FormData.
2. Converta o FormData em um array usando Array.from().
3. Colete o objeto do array usando Array.prototype.reduce().

Aqui está um trecho de código de exemplo:

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

Para converter um formulário específico, você pode chamar a função formToObject e passar o elemento do formulário como um argumento:

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

Resumo

Parabéns! Você concluiu o laboratório Form to Object. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.