FormData.entries() — Methode · JavaScript-Referenz

Signatur

FormData.prototype.entries()

Beschreibung

FormData.entries() liefert einen Iterator über alle Einträge eines FormData-Objekts. Jeder Schritt gibt ein Array mit zwei Elementen zurück: den Feldnamen (immer ein string) und den Wert (string oder File). Die Reihenfolge entspricht der Reihenfolge, in der die Einträge hinzugefügt wurden bzw. in der die Felder im Formular stehen.

Die Methode ist vor allem nützlich, um Formulardaten zu prüfen, zu debuggen oder in andere Strukturen umzuwandeln, z. B. in ein einfaches Objekt mit Object.fromEntries() oder in JSON für einen fetch()-Aufruf. Da FormData selbst iterierbar ist, ist for (const [k, v] of formData) gleichwertig zu for (const [k, v] of formData.entries()).

Wichtig: Ein Feldname kann mehrfach vorkommen (z. B. bei Checkboxen mit gleichem name oder <select multiple>). entries() liefert dann jeden Eintrag einzeln. Beim Umwandeln in ein Objekt gehen solche Mehrfachwerte verloren, wenn man sie nicht gesondert behandelt.

Rückgabewert

Typ

Iterator<[string, string | File]>

Beschreibung

Ein Iterator (FormData Iterator), dessen Werte Arrays der Form [name, value] sind. Der Wert ist ein string oder ein File-Objekt.

Beispiele

Alle Einträge eines FormData-Objekts ausgeben

const formData = new FormData();
formData.append('benutzer', 'anna');
formData.append('rolle', 'admin');
formData.append('rolle', 'editor');

for (const [name, wert] of formData.entries()) {
  console.log(`${name}: ${wert}`);
}

benutzer: anna rolle: admin rolle: editor

Formular beim Absenden als JSON senden

const form = document.querySelector('#kontakt');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const daten = Object.fromEntries(new FormData(form).entries());

  const antwort = await fetch('/api/kontakt', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(daten)
  });
  console.log('Status:', antwort.status);
});

Status: 200

Mehrfachwerte korrekt gruppieren

const fd = new FormData();
fd.append('tag', 'js');
fd.append('tag', 'css');
fd.append('titel', 'Artikel');

const gruppiert = {};
for (const [name, wert] of fd.entries()) {
  (gruppiert[name] ??= []).push(wert);
}
console.log(gruppiert);

{ tag: ['js', 'css'], titel: ['Artikel'] }

Dateien von Textfeldern unterscheiden

const fd = new FormData();
fd.append('name', 'Bericht');
fd.append('anhang', new File(['Hallo'], 'notiz.txt', { type: 'text/plain' }));

for (const [name, wert] of fd.entries()) {
  if (wert instanceof File) {
    console.log(`${name}: Datei ${wert.name} (${wert.size} Bytes)`);
  } else {
    console.log(`${name}: ${wert}`);
  }
}

name: Bericht anhang: Datei notiz.txt (5 Bytes)

// Wichtig · Fallstricke

Mehrfachwerte: Object.fromEntries(formData.entries()) behält bei doppelten Namen nur den letzten Wert. Für Checkbox-Gruppen oder <select multiple> stattdessen formData.getAll(name) nutzen oder selbst gruppieren.
Kein Array: Der Rückgabewert ist ein Iterator, kein Array – .map() oder .length gibt es nicht. Bei Bedarf mit Array.from() oder Spread-Syntax umwandeln.
Einmal verbrauchbar: Ein Iterator kann nur einmal durchlaufen werden; für einen zweiten Durchlauf erneut entries() aufrufen.
Debugging: console.log(formData) zeigt in vielen Browsern keinen Inhalt – entries() ist der zuverlässige Weg, den Inhalt zu prüfen.
Nicht erfasste Felder: Deaktivierte Felder (disabled), nicht angehakte Checkboxen und Felder ohne name erscheinen nicht in FormData.
Kompatibilität: In allen modernen Browsern verfügbar; der Internet Explorer unterstützt die Methode nicht. In Node.js ist FormData ab Version 18 global verfügbar.

Siehe auch

FormData.values() FormData.delete() FormData.get() FormData.getAll() FormData.has()