Conversion d'un formulaire en objet

Introduction

Dans ce laboratoire, nous allons explorer la manière de convertir un ensemble d'éléments de formulaire en un objet à l'aide de JavaScript. Nous utiliserons le constructeur FormData et la méthode Array.from() pour créer un tableau de données de formulaire. Nous utiliserons ensuite la méthode Array.prototype.reduce() pour collecter les données de formulaire dans un objet. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de collecter et d'organiser les données de formulaire à l'aide de JavaScript.

Conversion d'un formulaire en objet

Pour pratiquer la programmation, ouvrez le Terminal/SSH et tapez node. Vous pouvez encoder un ensemble d'éléments de formulaire sous forme d'un objet en utilisant les étapes suivantes :

1. Utilisez le constructeur FormData pour convertir le formulaire HTML en FormData.
2. Convertissez le FormData en tableau à l'aide de Array.from().
3. Collectez l'objet à partir du tableau à l'aide de Array.prototype.reduce().

Voici un extrait de code d'exemple :

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

Pour convertir un formulaire spécifique, vous pouvez appeler la fonction formToObject et passer l'élément de formulaire en tant qu'argument :

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur la conversion d'un formulaire en objet. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.