[解決済み] FormData(HTML5オブジェクト)をJSONに変換する方法

質問

HTML5で作成されたエントリーを、どのように変換すればよいですか？ FormData オブジェクトをJSONに変換できますか？

このソリューションでは、jQueryを使用するべきではありません。また、単純にすべての FormData オブジェクトのキー/バリュー・エントリのみです。

どのように解決するのですか？

を使用することもできます。 forEach の上に FormData オブジェクトを直接指定します。

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

UPDATE

また、同じ解決策を ES6 矢印関数 :

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

UPDATE 2:

また、マルチセレクトリストや複数の値を持つ他のフォーム要素をサポートしたい人のために (この問題に関する回答の下に非常に多くのコメントがあるので、可能性のある解決策を追加します) :

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

フィドルはこちら このメソッドを単純な複数選択リストで使用するデモを行います。

アップデイト3。

ここで終わる人のための余談ですが、フォームデータを json に変換する目的が XML HTTP リクエストでサーバーに送信することである場合は FormData オブジェクトを変換せずに直接指定します。このように簡単です。

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

参照 また FormDataオブジェクトの使用 参考までにMDNに掲載 :

UPDATE 4:

私の回答の下のコメントで述べたように、JSONの stringify メソッドは、すべてのタイプのオブジェクトに対してすぐに動作するわけではありません。どのようなタイプがサポートされているかについては、以下を参照してください。 の MDN ドキュメントの Description セクションを参照してください。 JSON.stringify .

説明文にはこうも書かれている。

valueにtoJSON()メソッドがある場合、どのようなデータをシリアライズするかを定義する責任があります。

つまり、自分で用意した toJSON シリアライゼーションメソッドに、カスタムオブジェクトをシリアライズするためのロジックを追加します。このように、より複雑なオブジェクトツリーに対するシリアライズサポートを迅速かつ容易に構築することができます。