Convertir un formulaire en objet avec JavaScript

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 :

Utilisez le constructeur FormData pour convertir le formulaire HTML en FormData.

Convertissez le FormData en tableau à l'aide de Array.from().

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' }

Conversion d'un formulaire en objet

Introduction

Skills Graph

Conversion d'un formulaire en objet

Sommaire