Formulario a Objeto

Introducción

En este laboratorio, exploraremos cómo convertir un conjunto de elementos de formulario en un objeto utilizando JavaScript. Utilizaremos el constructor FormData y el método Array.from() para crear una matriz de datos de formulario. Luego utilizaremos el método Array.prototype.reduce() para recopilar los datos de formulario en un objeto. Al final de este laboratorio, tendrás una mejor comprensión de cómo recopilar y organizar datos de formulario utilizando JavaScript.

Convertir un formulario en un objeto

Para practicar la codificación, abre la Terminal/SSH y escribe node. Puedes codificar un conjunto de elementos de formulario como un objeto siguiendo los siguientes pasos:

1. Utiliza el constructor FormData para convertir el formulario HTML en FormData.
2. Convierte el FormData en una matriz utilizando Array.from().
3. Recopila el objeto de la matriz utilizando Array.prototype.reduce().

A continuación, se muestra un fragmento de código de ejemplo:

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

Para convertir un formulario específico, puedes llamar a la función formToObject y pasar el elemento del formulario como argumento:

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

Resumen

¡Felicidades! Has completado el laboratorio de Formulario a Objeto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.