So konvertieren Sie FormData (HTML5-Objekt) zu JSON

Question

Wie HTML5 FormData-Objekt in JSON konvertieren? Ohne Jquery und Handhabung verschachtelter Eigenschaften in FormData wie ein Objekt.

Answer 1

Sie auch forEach auf dem FormData Objekt direkt verwenden:

var object = {}; 
formData.forEach(function(value, key){ 
    object[key] = value; 
}); 
var json = JSON.stringify(object); 

Answer 2

Sie können dies erreichen, indem Sie das Objekt FormData() verwenden. Dieses FormData-Objekt wird mit den aktuellen Schlüsseln/Werten des Formulars gefüllt, wobei die Eigenschaft name jedes Elements für die Schlüssel und deren übergebener Wert für die Werte verwendet wird. Es wird auch Dateieingabeinhalt codieren.

Beispiel:

var myForm = document.getElementById('myForm'); 
myForm.addEventListener('submit', function(event) 
{ 
    event.preventDefault(); 
    var formData = new FormData(myForm), 
     result = {}; 

    for (var entry of formData.entries()) 
    { 
     result[entry[0]] = entry[1]; 
    } 
    result = JSON.stringify(result) 
    console.log(result); 

}); 

Answer 3

Einfache Funktion nutzen zu können

I erstellte A Function For This

function FormDataToJSON(FormElement){  
    var formData = new FormData(FormElement); 
    var ConvertedJSON= {}; 
    for (const [key, value] of formData.entries()) 
    { 
     ConvertedJSON[key] = value; 
    } 

    return ConvertedJSON 
} 

Beispiel Verwendung

var ReceivedJSON = FormDataToJSON(document.getElementById('FormId');) 

In diesem Code habe ich eine leere JSON-Variable mit for Schleife erstellt Ich habe key s von FormData Object zu JSON Keys in jeder Itration verwendet.

Sie diesen Code finden in meiner JS-Bibliothek auf GitHub schlägt mich, wenn es verbessert werden muß ich hier Platziert Code habe https://github.com/alijamal14/Utilities/blob/master/Utilities.js

Answer 4

Formdata Methode .entries und der for of Ausdruck nicht in IE11 und Safari unterstützt.

Hier ist eine einfachere Version Safari, Chrome, Firefox und Edge-

function formDataToJSON(formElement) {  
    var formData = new FormData(formElement), 
     convertedJSON = {}; 

    formData.forEach(function(value, key) { 
     convertedJSON[key] = value; 
    }); 

    return convertedJSON; 
} 

Warnung zu unterstützen: diese Antwort nicht funktioniert in IE11.
FormData hat keine forEach Methode in IE11.
Ich bin immer noch auf der Suche nach einer endgültigen Lösung zur Unterstützung aller gängigen Browser.

Answer 5

Wenn Sie lodash verwenden es bündig mit fromPairs

import {fromPairs} from 'lodash'; 

const object = fromPairs(Array.from(formData.entries())); 

Answer 6

getan werden kann, ist hier ein Weg, um es in einem mehr zu tun funktionaler Stil, ohne die Verwendung einer Bibliothek.

Array.from(formData.entries()).reduce((memo, pair) => ({ 
    ...memo, 
    [pair[0]]: pair[1], 
}), {}); 

Beispiel:

document.getElementById('foobar').addEventListener('submit', (e) => { 
 
    e.preventDefault(); 
 

 
    const formData = new FormData(e.target); 
 
    const data = Array.from(formData.entries()).reduce((memo, pair) => ({ 
 
    ...memo, 
 
    [pair[0]]: pair[1], 
 
    }), {}); 
 
    document.getElementById('output').innerHTML = JSON.stringify(data); 
 
});

<form id='foobar'> 
 
    <input name='baz' /> 
 
    <input type='submit' /> 
 
</form> 
 

 
<pre id='output'>Input some value and submit</pre>