Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
97
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@_Keitaro_

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

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"]
*/

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

97
Help us understand the problem. What is going on with this article?
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
97
Help us understand the problem. What is going on with this article?