Wie konvertiere ich ein HTML5 FormData-Objekt in JSON? Ohne Abfrage und Behandlung verschachtelter Eigenschaften in FormData wie ein Objekt.
javascript
form-data
Leonardo Villela
quelle
quelle
JSON.stringify()
hilft? Vielleicht versuchen Sie etwas zu reparieren, das auf andere Weise getan werden kann?Antworten:
Sie können
forEach
dasFormData
Objekt auch direkt verwenden:AKTUALISIEREN:
Und für diejenigen, die dieselbe Lösung mit ES6-Pfeilfunktionen bevorzugen :
UPDATE 2:
Und für diejenigen, die Unterstützung für Mehrfachauswahllisten oder andere Formularelemente mit mehreren Werten wünschen (da die Antwort zu diesem Problem so viele Kommentare enthält, werde ich eine mögliche Lösung hinzufügen) :
Hier eine Geige , die die Verwendung dieser Methode anhand einer einfachen Mehrfachauswahlliste demonstriert.
UPDATE 3:
Als Randnotiz für diejenigen, die hier landen, können Sie das
FormData
Objekt direkt senden, ohne es zu konvertieren , falls der Zweck der Konvertierung der Formulardaten in json darin besteht, sie über eine XML-HTTP-Anforderung an einen Server zu senden . So einfach ist das:Siehe auch Verwenden von FormData-Objekten auf MDN als Referenz :
UPDATE 4:
Wie in einem der Kommentare unter meiner Antwort erwähnt,
stringify
funktioniert die JSON- Methode nicht sofort für alle Arten von Objekten. Weitere Informationen darüber, welche Typen unterstützt werden, finden Sie im Abschnitt Beschreibung in der MDN-Dokumentation vonJSON.stringify
.In der Beschreibung wird auch erwähnt, dass:
Dies bedeutet, dass Sie Ihre eigene
toJSON
Serialisierungsmethode mit Logik zum Serialisieren Ihrer benutzerdefinierten Objekte versehen können. Auf diese Weise können Sie schnell und einfach Serialisierungsunterstützung für komplexere Objektbäume erstellen.quelle
<SELECT MULTIPLE>
und<INPUT type="checkbox">
mit demselben Namen funktioniert, indem ich den Wert in ein Array konvertierte.JSON.stringify(Object.fromEntries(formData));
ist, ist die Antwort mit so viel schönerIm Jahr 2019 wurde diese Art von Aufgabe sehr einfach.
Object.fromEntries
: Unterstützt in Chrome 73+, Firefox 63+, Safari 12.1quelle
<select multiple>
oder<input type="checkbox">
😞JSON.stringify(Object.fromEntries(formData.entries()));
Hier ist eine Möglichkeit, dies in einem funktionaleren Stil ohne Verwendung einer Bibliothek zu tun.
Beispiel:
quelle
Wenn Sie mehrere Einträge mit demselben Namen haben, z. B. wenn Sie mehrere Einträge mit demselben Namen verwenden
<SELECT multiple>
oder haben<INPUT type="checkbox">
, müssen Sie sich darum kümmern und ein Array mit dem Wert erstellen. Andernfalls erhalten Sie nur den zuletzt ausgewählten Wert.Hier ist die moderne ES6-Variante:
Etwas älterer Code (aber noch nicht von IE11 unterstützt, da es nicht unterstützt
ForEach
oderentries
aufFormData
)quelle
Sie können dies mit dem Objekt FormData () erreichen . Dieses FormData-Objekt wird mit den aktuellen Schlüsseln / Werten des Formulars gefüllt, wobei die name-Eigenschaft jedes Elements für die Schlüssel und der übermittelte Wert für die Werte verwendet werden. Es wird auch den Inhalt der Dateieingabe codieren.
Beispiel:
quelle
for (const [key, value] of formData.entries())
Einfach zu bedienende Funktion
Ich habe eine Funktion dafür erstellt
Beispiel Verwendung
In diesem Code habe ich eine leere JSON-Variable mithilfe einer
for
Schleife erstellt. Ich habekey
in jeder Itration s von formData Object zu JSON-Schlüsseln verwendet.Sie finden diesen Code in meiner JS-Bibliothek auf GitHub. Schlagen Sie mir vor, wenn er verbessert werden muss. Ich habe Code hier platziert. Https://github.com/alijamal14/Utilities/blob/master/Utilities.js
quelle
<select multiple>
oder<input type="checkbox">
.Die FormData-Methode
.entries
und derfor of
Ausdruck werden in IE11 und Safari nicht unterstützt .Hier ist eine einfachere Version zur Unterstützung von Safari, Chrome, Firefox und Edge
Warnung: Diese Antwort funktioniert in IE11 nicht.
FormData hat keine
forEach
Methode in IE11.Ich bin immer noch auf der Suche nach einer endgültigen Lösung, um alle gängigen Browser zu unterstützen.
quelle
Dieser Beitrag ist bereits ein Jahr alt ... aber die Antwort auf ES6 @dzuc gefällt mir wirklich sehr gut. Es ist jedoch unvollständig, da mehrere Auswahl- oder Kontrollkästchen nicht verarbeitet werden konnten. Dies hat bereits gezeigt und Codelösungen wurden angeboten. Ich finde sie schwer und nicht optimiert. Also habe ich 2 Versionen basierend auf @dzuc geschrieben, um diese Fälle zu behandeln:
Einzeilige Hotshot-Version:
[]
Suffix haben müssen .Einzeilige Hotshot-Version:
Seit ich das letzte Mal den vorherigen zweiten Fall geschrieben habe, kam es bei der Arbeit zu einem Fall, dass das PHP-Formular Kontrollkästchen auf mehreren Ebenen enthält. Ich habe einen neuen Fall geschrieben, um den vorherigen und diesen Fall zu unterstützen. Ich habe ein Snippet erstellt, um diesen Fall besser zu präsentieren. Das Ergebnis wird auf der Konsole für diese Demo angezeigt. Ändern Sie dies nach Ihren Wünschen. Es wurde versucht, es so gut wie möglich zu optimieren, ohne die Leistung zu beeinträchtigen. Es beeinträchtigt jedoch die Lesbarkeit des Menschen. Es ist vorteilhaft, dass Arrays Objekte sind und Variablen, die auf Arrays zeigen, als Referenz beibehalten werden. Kein Hotshot für diesen, sei mein Gast.
quelle
Array.from(fd).reduce((obj, [k, v]) => ({...obj, [k]: v}), {});
hotshot version es2018Wenn Sie lodash verwenden, kann dies präzise durchgeführt werden
fromPairs
quelle
Wenn Sie Unterstützung für die Serialisierung verschachtelter Felder benötigen, ähnlich wie PHP Formularfelder behandelt, können Sie die folgende Funktion verwenden
quelle
Sie können dies versuchen
quelle
Obwohl die Antwort von @dzuc bereits sehr gut ist, können Sie die Array-Destrukturierung (verfügbar in modernen Browsern oder mit Babel) verwenden, um sie noch eleganter zu gestalten:
quelle
Missbräuchlicher Einzeiler!
Heute habe ich erfahren, dass Firefox die Unterstützung der Objektverbreitung und die Zerstörung von Arrays unterstützt!
quelle
Wenn die folgenden Artikel Ihren Anforderungen entsprechen, haben Sie Glück:
[['key','value1'], ['key2','value2']
(wie es FormData Ihnen gibt) in ein key-> value-Objekt wie{key1: 'value1', key2: 'value2'}
konvertieren und es in eine JSON-Zeichenfolge konvertieren.Hier ist der Code, den Sie benötigen:
Hoffe das hilft jemandem.
quelle
Ich habe bisher keine Erwähnungen der FormData.getAll- Methode gesehen.
Neben der Rückgabe aller mit einem bestimmten Schlüssel verknüpften Werte aus einem FormData-Objekt wird die Verwendung der Object.fromEntries- Methode, wie sie von anderen hier angegeben wird, sehr einfach .
Snippet in Aktion
quelle
Hat für mich gearbeitet
quelle
<select multiple>
oder<input type="checkbox">
In meinem Fall waren Daten Daten, die Feuerbasis erwartete ein Objekt, aber Daten enthalten Objekt sowie alle anderen Dinge, also habe ich data.value ausprobiert, es hat funktioniert !!!
quelle
Ich komme spät hier an. Ich habe jedoch eine einfache Methode erstellt, die nach dem Eingabetyp = "checkbox" sucht.
Ich hoffe das hilft jemand anderem.
quelle
Sie können diese Aufgabe problemlos erledigen, ohne etwas Besonderes zu verwenden. Ein Code wie der folgende reicht aus.
quelle