FormDataオブジェクトの中身を確認する方法

公開日：2017/06/03

更新日：2019/12/27

カテゴリー: javascript

私はajaxを利用する際データをFormDataオブジェクトに格納してからサーバーにデータを投げます。

このときいったん中身の確認処理を入れますが、頭が悪いので毎回

コンソールログでFormDataオブジェクトの中身ってどうやって確認するんだったっけ？

とすぐ忘れるので、方法説明も兼ねてここにメモしておきます。

FormDataオブジェクトの中身を確認

説明のためにまずはテキトーなFormDataオブジェクトを定義します。

//送信データ
var formData = new FormData();
formData.append('hoge1', 'abc');
formData.append('hoge2', 123);
formData.append('hoge3', true);
formData.append('hoge4', false);
formData.append('hoge5', 'true');

では、このFormDataオブジェクトの中身を見ていきましょう。

getメソッドで確認

getメソッドを使えば、指定したデータをピンポイントに取得できます。

console.log(formData.get('hoge1'));

実行結果

abc

ループで確認

次のようにループを使えばすべてのデータ内容を確認できます

for(item of formData){
    console.log(item);
}

実行結果

Array [ "hoge1", "abc" ] Array [ "hoge2", "123" ] Array [ "hoge3", "true" ] Array [ "hoge4", "false" ] Array [ "hoge5", "true" ]

キーと値を取得

上の結果から配列になっていることがわかったので、次のようにデータのキーと値が取得できることがわかりました。

for(item of formData){
    console.log(item[0]);
}

これを実行するとキーが取得できます。

hoge1 hoge2 hoge3 hoge4 hoge5

また、値も取得できます。

for(item of formData){
    console.log(item[1]);
}

実行結果

abc 123 true false true

蛇足ですが、これでも

for(item of formData){
	console.log(item[0], item[1]);
}

そしてこれでも

for([key, value] of formData){
	console.log(key, value);
}

このようになります。

hoge1 abc hoge2 123 hoge3 true hoge4 false hoge5 true

値がオブジェクトの場合はさらにひも解いていく必要がありますが、ここまでわかればあとは好きなように条件分岐やらなんやらできそうですね。

中身を確認できないパターン

私は毎回考えることなく反射的に次のようにやってしまいます。

console.log(formData);

しかしFormDataオブジェクトはプロパティで値を持っていないので次のようになって中身を確認できません。

FormData { }

また、次のようにしても失敗します。

console.dir(formData);

コンソールログにはこのように表示されて、一見データの中身を見れそうですが、探すのが面倒です（ある程度探しましたが見当たらなかったのであるのかどうかはわかりません）。

【追記】

これまでガチャガチャ上のような面倒なことをやっていましたが、オブジェクトの中身を見たい場合は「 object.toSource() 」関数を使えば一発OKっぽいです。

console.log(obj.toSource());

なお、グーグルクロームの場合は「 object.toSource() 」関数はサポートされていないらしいので「 JSON.stringify() 」関数を使います。

console.log(JSON.stringify(obj));

あわせて読んでほしい！

Follow @ysklog_net 　

まだコメントはありません。

コメントフォーム

FormDataオブジェクトの中身を確認

getメソッドで確認

ループで確認

キーと値を取得

中身を確認できないパターン

関連してそうなオススメ記事

コメント