Convertir datos de formulario en objetos de JavaScript

En esta guía, aprenda cómo convertir datos de formulario a JSON (objetos de JavaScript) con la API FormData integrada y sin dependencias externas, con código práctico y mejores prácticas.

Introducción

Cuando trabaje con formularios en JavaScript, normalmente necesitará convertir los datos del formulario en un objeto JavaScript (JSON) para completar una matriz, base de datos, almacenamiento local, enviarlo a una API o incluso consumir los datos en su aplicación. . La conversión entre los datos del formulario y JSON es una de las formas más comunes de procesar los datos del formulario, ya que abre las puertas a una gran cantidad de otros usos para esos datos.

En este artículo, veremos cómo convertir fácilmente datos de formulario en un objeto JavaScript sin instalar dependencias innecesarias. Lo lograremos simplemente usando FormData API, una API de navegador integrada que se usa para obtener valores de formulario como objetos de JavaScript.

manejar analizar y convertir los datos del formulario en un objeto javascript o json

{.icon aria-hidden=“true”}

Nota: Esta aplicación está disponible como demostración en CódigoPen.

Comencemos creando un formulario HTML simple que contenga varios campos de formulario comunes: dos campos de entrada, un área de texto y un botón de envío:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<form>
    <div class="form-control">
        <label for="name">Full Name</label>
        <input id="name" name="name" type="text" />
    </div>
    <div class="form-control">
        <label for="email">Email Address</label>
        <input id="email" name="email" type="email" />
    </div>
    <div class="form-control">
        <label for="message">Enter a Message</label>
        <textarea id="message" name="message" rows="6" cols="65"></textarea>
    </div>
    <button class="btn" type="submit">Send</button>
</form>

Ahora, podemos echar un vistazo a cómo convertir sus datos en JSON (Notación de objetos de JavaScript) usando la API de FormData.

API de FormData

FormData es una API de navegador integrada que nos proporciona una forma de acceder fácilmente a cualquier campo de un formulario HTML. El primer paso para usar la API FormData es obtener el elemento de formulario usando algunos de los métodos HTML DOM apropiados: document.querySelector() o document.getElementById(). Después de eso, podemos agregar un detector de eventos que llama a callbackFunction cuando registra un evento submit en el formulario:

1
2
3
const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);

Para que el detector de eventos funcione, debemos definir la función que manejará el evento submit. Por ahora, hagamos que cree el objeto FormData y registre su contenido en la consola:

1
2
3
4
5
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);
    console.log(myFormData);
}

{.icon aria-hidden=“true”}

Nota: Utilizamos preventDefault() para evitar que el formulario se vuelva a cargar después de hacer clic en el botón Enviar, que es el comportamiento predeterminado. Este es un valor predeterminado sensato, pero por el bien de la ilustración en nuestra aplicación, lo evitaremos y mostraremos los datos en el div de la derecha.

Cuando ejecute el código anterior, el resultado será un objeto vacío, que no es lo que esperábamos:

1
FormData {}

Aunque pueda parecer que hemos creado un objeto vacío, ese no es el caso. Ese objeto FormData tiene un par clave-valor para cada campo en nuestro formulario; por lo tanto, necesitamos iterar sobre todos esos pares y almacenarlos en un objeto separado. Después de eso, podemos usar ese objeto para acceder a cada campo individual de nuestro formulario.

Hay dos formas principales de obtener datos de la API de FormData: una es recorrer cada par clave-valor y la otra es usar el método Object.fromEntries().

Cómo convertir datos de formulario a JSON con bucles

La primera forma de crear un objeto legible a partir de un objeto FormData es iterar sobre sus pares clave-valor y agregar manualmente claves y valores al objeto recién creado. Para el propósito de este artículo, usaremos el ciclo forEach() en JavaScript. En primer lugar, crearemos un objeto vacío y luego iteramos sobre el objeto FormData que hemos creado en la sección anterior:

1
2
const formDataObj = {};
myFormData.forEach((value, key) => (formDataObj[key] = value));

{.icon aria-hidden=“true”}

Nota: El método forEach() no es compatible con asincrónico, si necesita que su función de devolución de llamada admita llamadas asincrónicas, debe usar el bucle for-of.

En este punto, podemos modificar callbackFunction() de la sección anterior para que muestre correctamente los datos del formulario como un objeto:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
                      
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = {};
    myFormData.forEach((value, key) => (formDataObj[key] = value));
    console.log(formDataObj);
});

Ahora, cuando completemos nuestro formulario y hagamos clic en el botón Enviar, deberíamos tener el siguiente resultado:

1
2
3
4
5
{
    "name": "John Doe",
    "email": "[correo electrónico protegido]",
    "message": "Hello World"
}

Este objeto tiene nombres de campo como claves y valores de campo correspondientes como valores.

Cómo convertir datos de formulario a JSON con Object.fromEntries()

Alternativamente, podemos usar el método Object.fromEnteries() en lugar de bucles para recuperar campos de formulario del objeto FormData. De esa manera, no necesitamos crear un objeto vacío antes de comenzar: el método nos permite convertir directamente el objeto FormData en el objeto JavaScript correspondiente:

1
const formDataObj = Object.fromEntries(myFormData.entries());

En este punto, nuestra función de devolución de llamada modificada se verá así:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    console.log(formDataObj);
});

Un objeto que se completa con Object.fromEnteries() tendrá los nombres de los campos de formulario como sus claves y los valores de formulario correspondientes como sus valores:

1
2
3
4
5
{
    "name": "John Doe",
    "email": "[correo electrónico protegido]",
    "message": "Hello World"
}

{.icon aria-hidden=“true”}

Nota: Para ambos métodos, podemos usar JSON.stringify() para convertir el objeto en una cadena JSON, que luego podemos usar para enviar datos codificados en JSON a las API.

Cómo obtener múltiples valores seleccionados en JSON con la API de FormData

Los métodos anteriores son compatibles con casi todos los campos de formulario: texto de entrada, número, radio, seleccionar... Sin embargo, hay otros campos con los que puede ser un poco más complicado trabajar. La más notable es la casilla de verificación: permite seleccionar varios valores. Pero los métodos mostrados anteriormente reemplazarán todos esos valores seleccionados con solo uno, que finalmente se almacena en el objeto resultante. Echemos un vistazo a cómo resolver eso y almacenar todos los valores seleccionados en el objeto resultante. Supongamos que tenemos un formulario HTML con un campo de casilla de verificación:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!-- -->

<div class="form-control-2">
    <p class="group-label">Your favourite pet:</p>
    <input type="checkbox" name="favorite_pet" value="Cats" />Cats
    <input type="checkbox" name="favorite_pet" value="Dogs" />Dogs
    <input type="checkbox" name="favorite_pet" value="Birds" />Birds
</div>

<!-- -->

Podemos obtener todos los datos seleccionados en una matriz usando el método getAll() en el objeto FormData:

1
formDataObj.favorite_pet = myFormData.getAll('favorite_pet');

En este punto, nuestro código se verá así:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    formDataObj.favorite_pet = myFormData.getAll('favorite_pet');
    console.log(formDataObj);
});

Y el objeto poblado contendrá una matriz de valores que un usuario seleccionó en el campo de la casilla de verificación:

1
2
3
4
5
6
7
8
9
{
    "name": "uhuk",
    "email": "[correo electrónico protegido]",
    "message": "jgghhjb",
    "favorite_pet": [
    "Cats",
    "Birds"
    ]
}

{.icon aria-hidden=“true”}

Nota: Puede consultar esta demostración en vivo en CodePen que utiliza todos los tipos de campos de formulario principales y genera los datos como un objeto JavaScript cuando presentada.

Conclusión

En este artículo, analizamos cómo usar la API de FormData para convertir datos de formulario en objetos de JavaScript sin dependencias adicionales. También hemos aprendido cómo manejar correctamente varios tipos de campos de formulario (entradas, áreas de texto, etc.), así como algunos más complicados, como las casillas de verificación.