So konvertieren Sie FormData (HTML5-Objekt) in JSON

Wie konvertiere ich ein HTML5 FormData-Objekt in JSON? Ohne Abfrage und Behandlung verschachtelter Eigenschaften in FormData wie ein Objekt.

Sie können forEachdas FormDataObjekt auch direkt verwenden:

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

AKTUALISIEREN:

Und für diejenigen, die dieselbe Lösung mit ES6-Pfeilfunktionen bevorzugen :

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

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) :

var object = {};
formData.forEach((value, key) => {
    // Reflect.has in favor of: object.hasOwnProperty(key)
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

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 FormDataObjekt 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:

var request = new XMLHttpRequest();
request.open("POST", "http://example.com/submitform.php");
request.send(formData);

Siehe auch Verwenden von FormData-Objekten auf MDN als Referenz :

UPDATE 4:

Wie in einem der Kommentare unter meiner Antwort erwähnt, stringifyfunktioniert 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:

Wenn der Wert eine toJSON () -Methode hat, muss er definieren, welche Daten serialisiert werden sollen.

Dies bedeutet, dass Sie Ihre eigene toJSONSerialisierungsmethode 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.

Im Jahr 2019 wurde diese Art von Aufgabe sehr einfach.

JSON.stringify(Object.fromEntries(formData));

Object.fromEntries: Unterstützt in Chrome 73+, Firefox 63+, Safari 12.1

Hier ist eine Möglichkeit, dies in einem funktionaleren Stil ohne Verwendung einer Bibliothek zu tun.

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>

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:

function formToJSON( elem ) {
  let output = {};
  new FormData( elem ).forEach(
    ( value, key ) => {
      // Check if property already exist
      if ( Object.prototype.hasOwnProperty.call( output, key ) ) {
        let current = output[ key ];
        if ( !Array.isArray( current ) ) {
          // If it's not an array, convert it to an array.
          current = output[ key ] = [ current ];
        }
        current.push( value ); // Add the new value to the array.
      } else {
        output[ key ] = value;
      }
    }
  );
  return JSON.stringify( output );
}

Etwas älterer Code (aber noch nicht von IE11 unterstützt, da es nicht unterstützt ForEachoder entriesauf FormData)

function formToJSON( elem ) {
  var current, entries, item, key, output, value;
  output = {};
  entries = new FormData( elem ).entries();
  // Iterate over values, and assign to item.
  while ( item = entries.next().value )
    {
      // assign to variables to make the code more readable.
      key = item[0];
      value = item[1];
      // Check if key already exist
      if (Object.prototype.hasOwnProperty.call( output, key)) {
        current = output[ key ];
        if ( !Array.isArray( current ) ) {
          // If it's not an array, convert it to an array.
          current = output[ key ] = [ current ];
        }
        current.push( value ); // Add the new value to the array.
      } else {
        output[ key ] = value;
      }
    }
    return JSON.stringify( output );
  }

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:

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);

});

Einfach zu bedienende Funktion

Ich habe eine Funktion dafür erstellt

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 mithilfe einer forSchleife erstellt. Ich habe keyin 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

Die FormData-Methode .entriesund der for ofAusdruck werden in IE11 und Safari nicht unterstützt .

Hier ist eine einfachere Version zur Unterstützung von 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: Diese Antwort funktioniert in IE11 nicht.
FormData hat keine forEachMethode in IE11.
Ich bin immer noch auf der Suche nach einer endgültigen Lösung, um alle gängigen Browser zu unterstützen.

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:

• Für Formulare im ASP-Stil, bei denen der Name mehrerer Elemente einfach wiederholt werden kann.

let r=Array.from(fd).reduce(
  (o , [k,v]) => (
     (!o[k])
     ? {...o , [k] : v}
     : {...o , [k] : [...o[k] , v]}
   )
   ,{}
);
let obj=JSON.stringify(r);

Einzeilige Hotshot-Version:

Array.from(fd).reduce((o,[k,v])=>((!o[k])?{...o,[k]:v}:{...o,[k]:[...o[k],v]}),{});

• Für Formulare im PHP-Stil, bei denen die Namen mehrerer Elemente ein []Suffix haben müssen .

let r=Array.from(fd).reduce(
  (o , [k,v]) => (
    (k.split('[').length>1)
    ? (k=k.split('[')[0]
      , (!o[k])
      ? {...o , [k] : [v]}
      : {...o , [k] : [...o[k] , v ]}
    )
    : {...o , [k] : v}
  )
  ,{}
);
let obj=JSON.stringify(r);

Einzeilige Hotshot-Version:

Array.from(fd).reduce((o,[k,v])=>((k.split('[').length>1)?(k=k.split('[')[0],(!o[k])?{...o,[k]:[v]}:{...o,[k]:[...o[k],v]}):{...o,[k]:v}),{});

• Erweiterung des PHP-Formulars, das mehrstufige Arrays unterstützt.

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.

let nosubmit = (e) => {
  e.preventDefault();
  const f = Array.from(new FormData(e.target));
  const obj = f.reduce((o, [k, v]) => {
    let a = v,
      b, i,
      m = k.split('['),
      n = m[0],
      l = m.length;
    if (l > 1) {
      a = b = o[n] || [];
      for (i = 1; i < l; i++) {
        m[i] = (m[i].split(']')[0] || b.length) * 1;
        b = b[m[i]] = ((i + 1) == l) ? v : b[m[i]] || [];
      }
    }
    return { ...o, [n]: a };
  }, {});
  console.log(obj);
}
document.querySelector('#theform').addEventListener('submit', nosubmit, {capture: true});

<h1>Multilevel Form</h1>
<form action="#" method="POST" enctype="multipart/form-data" id="theform">
  <input type="hidden" name="_id" value="93242" />
  <input type="hidden" name="_fid" value="45c0ec96929bc0d39a904ab5c7af70ef" />
  <label>Select:
    <select name="uselect">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </label>
  <br /><br />
  <label>Checkboxes one level:<br/>
    <input name="c1[]" type="checkbox" checked value="1"/>v1 
    <input name="c1[]" type="checkbox" checked value="2"/>v2
    <input name="c1[]" type="checkbox" checked value="3"/>v3
  </label>
  <br /><br />
  <label>Checkboxes two levels:<br/>
    <input name="c2[0][]" type="checkbox" checked value="4"/>0 v4 
    <input name="c2[0][]" type="checkbox" checked value="5"/>0 v5
    <input name="c2[0][]" type="checkbox" checked value="6"/>0 v6
    <br/>
    <input name="c2[1][]" type="checkbox" checked value="7"/>1 v7 
    <input name="c2[1][]" type="checkbox" checked value="8"/>1 v8
    <input name="c2[1][]" type="checkbox" checked value="9"/>1 v9
  </label>
  <br /><br />
  <label>Radios:
    <input type="radio" name="uradio" value="yes">YES
    <input type="radio" name="uradio" checked value="no">NO
  </label>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Wenn Sie lodash verwenden, kann dies präzise durchgeführt werden fromPairs

import {fromPairs} from 'lodash';

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

Wenn Sie Unterstützung für die Serialisierung verschachtelter Felder benötigen, ähnlich wie PHP Formularfelder behandelt, können Sie die folgende Funktion verwenden

function update(data, keys, value) {
  if (keys.length === 0) {
    // Leaf node
    return value;
  }

  let key = keys.shift();
  if (!key) {
    data = data || [];
    if (Array.isArray(data)) {
      key = data.length;
    }
  }

  // Try converting key to a numeric value
  let index = +key;
  if (!isNaN(index)) {
    // We have a numeric index, make data a numeric array
    // This will not work if this is a associative array 
    // with numeric keys
    data = data || [];
    key = index;
  }
  
  // If none of the above matched, we have an associative array
  data = data || {};

  let val = update(data[key], keys, value);
  data[key] = val;

  return data;
}

function serializeForm(form) {
  return Array.from((new FormData(form)).entries())
    .reduce((data, [field, value]) => {
      let [_, prefix, keys] = field.match(/^([^\[]+)((?:\[[^\]]*\])*)/);

      if (keys) {
        keys = Array.from(keys.matchAll(/\[([^\]]*)\]/g), m => m[1]);
        value = update(data[prefix], keys, value);
      }
      data[prefix] = value;
      return data;
    }, {});
}

document.getElementById('output').textContent = JSON.stringify(serializeForm(document.getElementById('form')), null, 2);

<form id="form">
  <input name="field1" value="Field 1">
  <input name="field2[]" value="Field 21">
  <input name="field2[]" value="Field 22">
  <input name="field3[a]" value="Field 3a">
  <input name="field3[b]" value="Field 3b">
  <input name="field3[c]" value="Field 3c">
  <input name="field4[x][a]" value="Field xa">
  <input name="field4[x][b]" value="Field xb">
  <input name="field4[x][c]" value="Field xc">
  <input name="field4[y][a]" value="Field ya">
  <input name="field5[z][0]" value="Field z0">
  <input name="field5[z][]" value="Field z1">
  <input name="field6.z" value="Field 6Z0">
  <input name="field6.z" value="Field 6Z1">
</form>

<h2>Output</h2>
<pre id="output">
</pre>

Sie können dies versuchen

formDataToJSON($('#form_example'));

# Create a function to convert the serialize and convert the form data
# to JSON
# @param : $('#form_example');
# @return a JSON Stringify
function formDataToJSON(form) {
    let obj = {};
    let formData = form.serialize();
    let formArray = formData.split("&");

    for (inputData of formArray){
        let dataTmp = inputData.split('=');
        obj[dataTmp[0]] = dataTmp[1];
    }
    return JSON.stringify(obj);
}

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:

// original version from @dzuc
const data = Array.from(formData.entries())
  .reduce((memo, pair) => ({
    ...memo,
    [pair[0]: pair[1],
  }), {})

// with array destructuring
const data = Array.from(formData.entries())
  .reduce((memo,[key, value]) => ({
    ...memo,
    [key]: value,
  }), {})

Missbräuchlicher Einzeiler!

Array.from(fd).reduce((obj, [k, v]) => ({...obj, [k]: v}), {});

Heute habe ich erfahren, dass Firefox die Unterstützung der Objektverbreitung und die Zerstörung von Arrays unterstützt!

Wenn die folgenden Artikel Ihren Anforderungen entsprechen, haben Sie Glück:

1. Sie möchten ein Array von Arrays wie [['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.
2. Sie zielen auf Browser / Geräte mit dem neuesten ES6-Interpreter ab oder kompilieren mit etwas wie babel.
3. Sie möchten den kleinsten Weg, um dies zu erreichen.

Hier ist der Code, den Sie benötigen:

const data = new FormData(document.querySelector('form'));
const json = JSON.stringify(Array.from(data).reduce((o,[k,v])=>(o[k]=v,o),{}));

Hoffe das hilft jemandem.

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 .

var formData = new FormData(document.forms[0])

var obj = Object.fromEntries(
  Array.from(formData.keys()).map(key => [
    key, formData.getAll(key).length > 1 
    ? formData.getAll(key)
    : formData.get(key)
  ])
)

Snippet in Aktion

var formData = new FormData(document.forms[0])

var obj = Object.fromEntries(Array.from(formData.keys()).map(key => [key, formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key)]))

document.write(`<pre>${JSON.stringify(obj)}</pre>`)

<form action="#">
  <input name="name" value="Robinson" />
  <input name="items" value="Vin" />
  <input name="items" value="Fromage" />
  <select name="animals" multiple id="animals">
    <option value="tiger" selected>Tigre</option>
    <option value="turtle" selected>Tortue</option>
    <option value="monkey">Singe</option>
  </select>
</form>

Hat für mich gearbeitet

                var myForm = document.getElementById("form");
                var formData = new FormData(myForm),
                obj = {};
                for (var entry of formData.entries()){
                    obj[entry[0]] = entry[1];
                }
                console.log(obj);

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 !!!

Ich komme spät hier an. Ich habe jedoch eine einfache Methode erstellt, die nach dem Eingabetyp = "checkbox" sucht.

var formData = new FormData($form.get(0));
        var objectData = {};
        formData.forEach(function (value, key) {
            var updatedValue = value;
            if ($('input[name="' + key + '"]').attr("type") === "checkbox" && $('input[name="' + key + '"]').is(":checked")) {
                updatedValue = true; // we don't set false due to it is by default on HTML
            }
            objectData[key] = updatedValue;
        });
var jsonData = JSON.stringify(objectData);

Ich hoffe das hilft jemand anderem.

Sie können diese Aufgabe problemlos erledigen, ohne etwas Besonderes zu verwenden. Ein Code wie der folgende reicht aus.

var form = $(e.currentTarget);

var formData = objectifyForm(form);


function objectifyForm(formArray) {

    var returnArray = {};
    for (var i = 0; i < formArray[0].length; i++) {
        var name = formArray[0][i]['name'];
        if (name == "") continue;
        if (formArray[0][i]['type'] == "hidden" && returnArray[name] != undefined) continue;
        if ($(formArray[0][i]).attr("type") == "radio") {
            var radioInputs = $("[name='" + name + "']");
            var value = null;
            radioInputs.each(function (radio) {
                if ($(this)[0].checked == true) {
                    value = $(this).attr("id").split("_")[$(this).attr("id").split("_").length - 1];
                }
            });
            returnArray[name] = value;
        }
        else if ($(formArray[0][i]).attr("type") == "checkbox") {
            returnArray[name] = $(formArray[0][i])[0].checked;
        }
        else
            returnArray[name] = formArray[0][i]['value'];
    }



    return returnArray;
};