Conversion d'un formulaire en objet

JavaScriptJavaScriptBeginner
Pratiquer maintenant

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

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/variables -.-> lab-28315{{"Conversion d'un formulaire en objet"}} javascript/data_types -.-> lab-28315{{"Conversion d'un formulaire en objet"}} javascript/arith_ops -.-> lab-28315{{"Conversion d'un formulaire en objet"}} javascript/comp_ops -.-> lab-28315{{"Conversion d'un formulaire en objet"}} javascript/higher_funcs -.-> lab-28315{{"Conversion d'un formulaire en objet"}} javascript/spread_rest -.-> lab-28315{{"Conversion d'un formulaire en objet"}} javascript/dom_select -.-> lab-28315{{"Conversion d'un formulaire en objet"}} javascript/bom -.-> lab-28315{{"Conversion d'un formulaire en objet"}} end

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: '[email protected]', 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.