Help us understand the problem. What is going on with this article?

FormData オブジェクトの中身が見たい!

More than 1 year has passed since last update.

FormData オブジェクトとは

FormData オブジェクトは、XMLHttpRequest を使用して、データを送信するためのキーと値のセットを追加することができるインターフェイスです😇
キーのついたデータを送信するためにフォームとは独立して使用することができます
送信されるデータは、フォームのエンコードタイプがmultipart/form-dataに設定されている場合と同じ形式になります✌️

フィールドの追加方法

以下のように FormData オブジェクトをインスタンス化したら append() メソッドを呼び出すことでフィールドに追加することができます✨

const formData = new FormData();
formData.append('id', '00000001');
formData.append('name','karabiner');

FormData オブジェクトの中身を見るには?

FormData オブジェクトは以下のようになっています。
メソッドがたくさんありますが、
追加したフィールドはどこから見たらいいのか分からない😂

formData.png

get() getAll()メソッドで確認

  • get()は引数にキー名を渡すと、値を返します
  • getAll()は引数にキー名を渡すと、値(配列)を返します
const formData = new FormData();
formData.append('id', '00000001');
formData.append('name','karabiner');
formData.append('name','peter');

console.log(formData.get('id')); // "00000001"
console.log(formData.getAll('name')); // ["karabiner", "peter"]

しかし、それぞれ特定のキーの値を取得するメソッドになるので、
全てを一括で見れません😷💦

一括で確認する方法

entries()メソッドを使う🤘

for (let value of formData.entries()) { 
    console.log(value); 
}

/*
    ["id", "00000001"]
    ["name", "karabiner"]
    ["name", "peter"]
*/

ES6でもっとスマートに

ES6のスプレッド演算子を使えば一行で済みます🤘

console.log(...formData.entries());

/*
    ["id", "00000001"]
    ["name", "karabiner"]
    ["name", "peter"]
*/

ぱっと確認できるようなオブジェクトではないので、
中身を見るにはメソッドを呼び出さないといけません😩

_Keitaro_
2015.12からWEB制作会社で、主にWEBシステム開発の仕事をしています。
karabiner
主にシステム開発・アプリ開発・ Webサイト制作を行う会社です
http://www.karabiner.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした