Wie man HTML-Formulardaten mit JavaScript in JSON konvertiert

Key Takeaways

1. FormData und Object.fromEntries() bieten eine schnelle Möglichkeit, JSON aus Formularen zu erhalten.
2. Verwenden Sie getAll() oder manuelle Schleifen, um mehrere Felder mit demselben Namen zu verarbeiten.
3. Validieren und verarbeiten Sie JSON immer, bevor Sie es an einen Server senden.

Das Konvertieren von HTML-Formulardaten in das JSON-Format ist eine gängige Aufgabe in der Webentwicklung, insbesondere bei der Interaktion mit APIs oder der lokalen Speicherung von Daten. Dieser Leitfaden führt Sie durch verschiedene Methoden, um dies mit JavaScript zu erreichen.

---

Warum Formulardaten in JSON konvertieren?

• API-Integration: Viele moderne APIs akzeptieren Daten im JSON-Format.
• Datenspeicherung: JSON ist ein leichtgewichtiges Format, das sich ideal zum Speichern strukturierter Daten eignet.
• Konsistenz: Die Verwendung von JSON gewährleistet die Einheitlichkeit in verschiedenen Teilen Ihrer Anwendung.

---

Methode 1: Verwenden von FormData und Object.fromEntries()

Die FormData API bietet eine bequeme Möglichkeit, Formulardaten zu erfassen. In Kombination mit Object.fromEntries() können Sie diese Daten einfach in ein JSON-Objekt konvertieren.

Beispiel:

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault(); // Verhindert die Standard-Formularübertragung

    const formData = new FormData(form);
    const jsonData = Object.fromEntries(formData.entries());

    console.log(jsonData);
    // Um in JSON-String zu konvertieren:
    // console.log(JSON.stringify(jsonData));
  });
</script>

Hinweis: Diese Methode funktioniert gut für einfache Formulare, kann aber mehrere Eingaben mit demselben Namen (z. B. Kontrollkästchen) nicht wie erwartet verarbeiten.

---

Methode 2: Verarbeiten von mehreren Eingaben mit demselben Namen

Für Formularelemente wie Kontrollkästchen oder Mehrfachauswahlfelder, bei denen sich mehrere Eingaben denselben Namen teilen, kann FormData.getAll() verwendet werden, um alle Werte abzurufen.

Beispiel:

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <fieldset>
    <legend>Themen:</legend>
    <label>
      <input type="checkbox" name="topics" value="JavaScript" /> JavaScript
    </label>
    <label>
      <input type="checkbox" name="topics" value="HTML" /> HTML
    </label>
    <label>
      <input type="checkbox" name="topics" value="CSS" /> CSS
    </label>
  </fieldset>
  <button type="submit">Absenden</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(form);
    const jsonData = Object.fromEntries(formData.entries());

    // Mehrere Auswahlen verarbeiten
    jsonData.topics = formData.getAll('topics');

    console.log(jsonData);
  });
</script>

Ausgabebeispiel:

{
  "name": "Alice",
  "email": "alice@example.com",
  "topics": ["JavaScript", "CSS"]
}

---

Methode 3: Manuelle Konvertierung mit forEach()

Für mehr Kontrolle über den Konvertierungsprozess können Sie die FormData-Einträge manuell durchlaufen.

Beispiel:

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <fieldset>
    <legend>Themen:</legend>
    <label>
      <input type="checkbox" name="topics" value="JavaScript" /> JavaScript
    </label>
    <label>
      <input type="checkbox" name="topics" value="HTML" /> HTML
    </label>
    <label>
      <input type="checkbox" name="topics" value="CSS" /> CSS
    </label>
  </fieldset>
  <button type="submit">Absenden</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(form);
    const jsonData = {};

    formData.forEach((value, key) => {
      if (jsonData.hasOwnProperty(key)) {
        // Wenn der Schlüssel bereits existiert, konvertieren Sie ihn in ein Array oder hängen Sie ihn an das vorhandene Array an
        jsonData[key] = [].concat(jsonData[key], value);
      } else {
        jsonData[key] = value;
      }
    });

    console.log(jsonData);
  });
</script>

Dieser Ansatz stellt sicher, dass mehrere Werte für denselben Schlüssel korrekt erfasst werden.

---

Zusätzliche Überlegungen

• Checkbox-Werte: Wenn ein Kontrollkästchen aktiviert ist, wird sein Wert einbezogen; andernfalls wird er weggelassen. Stellen Sie sicher, dass Sie nicht markierte Kontrollkästchen bei Bedarf verarbeiten.
• Dateieingaben: FormData erfasst Dateieingaben als File-Objekte. Möglicherweise müssen Sie Datei-Uploads separat verarbeiten.
• Validierung: Validieren Sie Formulardaten immer, bevor Sie sie verarbeiten oder an einen Server senden.

---

Fazit

Das Konvertieren von HTML-Formulardaten in JSON in JavaScript kann durch verschiedene Methoden erreicht werden, die jeweils für unterschiedliche Szenarien geeignet sind. Die FormData API in Kombination mit Object.fromEntries() bietet eine prägnante Lösung für einfache Formulare, während die manuelle Iteration eine größere Flexibilität für komplexe Formulare bietet.

FAQs

Kann FormData Kontrollkästchen und Mehrfachauswahleingaben verarbeiten?

Ja, aber Sie müssen getAll() verwenden oder manuell schleifen, um alle ausgewählten Werte zu sammeln.

Was passiert mit nicht markierten Kontrollkästchen in der JSON-Ausgabe?

Nicht markierte Kontrollkästchen sind nicht in FormData enthalten. Behandeln Sie sie bei Bedarf explizit.

Ist diese Methode mit Datei-Uploads kompatibel?

FormData enthält Datei Objekte, diese müssen aber getrennt von JSON verarbeitet werden.

Wir sind Leapcell, Ihre erste Wahl für das Hosten von Backend-Projekten.

Leapcell ist die Next-Gen Serverless Plattform für Webhosting, Async Tasks und Redis:

Multi-Language Support

• Entwickeln Sie mit Node.js, Python, Go oder Rust.

Unbegrenzt viele Projekte kostenlos bereitstellen

• Zahlen Sie nur für die Nutzung - keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 US-Dollar unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollständig automatisierte CI/CD-Pipelines und GitOps-Integration.
• Echtzeitmetriken und -protokollierung für umsetzbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

• Auto-Skalierung zur einfachen Bewältigung hoher Parallelität.
• Kein Betriebsaufwand - konzentrieren Sie sich einfach auf das Bauen.

Erfahren Sie mehr in der Dokumentation!

Folgen Sie uns auf X: @LeapcellHQ