Formular in Objekt umwandeln

Einführung

In diesem Lab werden wir untersuchen, wie man mit JavaScript eine Reihe von Formularelementen in ein Objekt umwandelt. Wir werden den FormData-Konstruktor und die Array.from()-Methode nutzen, um ein Array aus Formulardaten zu erstellen. Anschließend werden wir die Array.prototype.reduce()-Methode verwenden, um die Formulardaten in ein Objekt zu sammeln. Am Ende dieses Labs werdet ihr ein besseres Verständnis dafür haben, wie man mit JavaScript Formulardaten sammelt und organisiert.

Umwandeln eines Formulars in ein Objekt

Um zu üben, öffnen Sie das Terminal/SSH und geben Sie node ein. Sie können eine Reihe von Formularelementen als Objekt kodieren, indem Sie die folgenden Schritte ausführen:

1. Verwenden Sie den FormData-Konstruktor, um das HTML-form in FormData umzuwandeln.
2. Konvertieren Sie das FormData in ein Array mit Array.from().
3. Sammeln Sie das Objekt aus dem Array mit Array.prototype.reduce().

Hier ist ein Beispielcodeausschnitt:

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

Um ein bestimmtes Formular zu konvertieren, können Sie die formToObject-Funktion aufrufen und das Formularelement als Argument übergeben:

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

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Formular zu Objekt-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.