FormDataを検査する方法は?


220

私はconsole.logを使ってループしてみました for in

ここでは、FormData のMDNリファレンスです。

どちらの試みもこのフィドルです。

var fd = new FormData(),
    key;

// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful
console.log(fd);

// does not do anything useful   
for(key in fd) {
    console.log(key);
}

フォームデータを調べて、どのキーが設定されているかを確認するにはどうすればよいですか。


これはFirefoxのみの機能ではありませんか?
Shiplu Mokaddim 2013年


1
key of fd代わりにしたいkey in fd。これが技術的になぜなのかはまだわかりませんが、動作します。ドキュメントはこちら
cilphex 2016年

それで、JavaScriptにコードを追加せずにフォームデータを表示するためのChromeまたはFirefoxプラグインはありませんか?
-natel、

回答:


298

更新された方法:

2016年3月の時点で、ChromeとFirefoxの最近のバージョンでは、を使用FormData.entries()したFormDataの検査がサポートされています。ソース

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

これを指摘してくれたGhost Echorlothに感謝します!

古い答え:

見た後、これらの Mozillaの 記事いるFormDataオブジェクトからデータを取得する方法がないように、それが見えます。AJAXリクエストを介して送信するFormDataを構築するためにのみ使用できます。

私はまた、同じことを示すこの質問を見つけました:FormData.append( "key"、 "value")が機能していません

これを回避する1つの方法は、通常の辞書を作成し、それをFormDataに変換することです。

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

プレーンなFormDataオブジェクトをデバッグしたい場合は、ネットワークリクエストコンソールで確認するために送信することもできます。

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

まあ、それは良い考えです。FormDataをヘルパーメソッドでラップし、オブジェクトリテラルを渡します。後で見たい場合に備えて、保存してください。

2
ChromeとFirefoxの最新バージョンの今イテレータを提供しますmyFormData.entries()
rloth

1
執筆時点では、FormDataにアクセスする方法はありませんでした。新しいAPIを反映するように回答を更新しました。頭を上げてくれてありがとう!
Ryan Endacott

2
既存のフォームのデータを次のようにして取得できることにも注目すると便利だと思いますvar formData = new FormData(formElement)。したがって、JQueryを使用している場合は、次のようにすることができますvar formData = new FormData($('#formElementID')[0])。次に、必要に応じてデータを追加します。
Peter Valadez

FormDataIE / Edgeでの反復:stackoverflow.com/questions/37938955/…–
cs_pupil

78

短い答え

console.log(...fd)

より長い答え

生のボディがどのように見えるかを検査したい場合は、応答コンストラクタ(フェッチAPIの一部)を使用できます。

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

エントリの各エントリをログに記録することをお勧めconsole.logする人もいますが、は複数の引数
console.log(foo, bar)
を取ることもできます。任意の数の引数を取るために、applyメソッドを使用して次のように呼び出すことができますconsole.log.apply(console, array)
しかし、spread演算子とiteratorで引数を適用する新しいES6方法があります
console.log(...array)

これを知っていて、FormDataと両方の配列のSymbol.iteratorプロトタイプにメソッドがあるという事実は、ループする必要がなく.entries()、イテレータの保持を取得するために呼び出す必要がないだけです。

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)


2
スプレッドオペレーター!! 素晴らしく、本当にシンプルで、フォームデータを疑似Json形式で表示します。おかげで-新しい応答のために、私は[[PromiseStatus]]: "pending"を取得します
プラチナ

5
または、Webコンソールから次のように書いてください[...fd]
Endless

地獄の鐘-あなたは再び@Endlessをやった。角かっこを使用して呼び出されるメソッドは何ですか?
プラチナ

かっこは単なる配列であり、新しいものを作成しています。...from formdataを使用してエントリを広げ、すべてのアイテムを含む新しい配列を作成します。その後、コンソールは、最後に書き込んだ行の結果をダンプします
Endless

1
ここでのベストアンサー-すべてのgumpfを削除し、2番目のコードスニペットだけを残してください
どうも

39

私はformData.entries()方法を使用します。すべてのブラウザのサポートについてはわかりませんが、Firefoxでは問題なく動作します。

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entriesから取得

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]); 
}

そこにもあるformData.get()formData.getAll()より広いブラウザのサポートと、彼らは唯一の値ではなくキーを持ち出します。詳細については、リンクを参照してください。


3
最後に、FormDataオブジェクトを簡単に調べることができます。これは、Chrome 50(昨日、2016年4月13日リリース)にアップグレードした後、私にはうまくいきました。
jbb

2
varのペアエラーをスローします。それをinに置き換えると、少なくとも何かを出力するように見えますが、MDNの状態のようなキーや値ではありません。
ジョニーウェルカー

1
ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
2540625

...のためにあるES6機能とそれだけで特定のブラウザで動作します。MDNに従って
Zanshin13

for ofはほとんどのIEでサポートされていません。IEエッジでのみサポート
mingca

11

特定のケースでは、次の使用:

for(var pair of formData.entries(){... 

不可能です。

私はこのコードを代わりに使用しました:

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

それはそれほどスマートなコードではありませんが、動作します...

お役に立てば幸いです。


1
ifステートメントをフリップして、done最初にチェックするようにします。done信頼できるフラグです。doneがfalseまたは指定されていない場合、それvalueは有効なアイテムです(値を保持していてもundefined)。とdoneが存在する場合true、シーケンスの最後に達しており、value定義する必要もありません。場合value時に定義されdoneているtrue、次にvalueイテレータの戻り値として解釈されます。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
Triynko

10

Angular 5+(TypeScript 2.4.2を使用)で作業しているとき、次のように試してみましたが、静的チェックエラー以外は機能しますが、機能し for(var pair of formData.entries())ません。

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

Stackblitzで確認する


+ IE 11と互換性がありません(value, key) => {..。頭痛 !
Delphine

1
いいね。あなたに10つ星を与えたいです。
Abdullah Nurum

10

簡単な方法

私は角度8でこのコードを使用しました

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

9

ES6 +ソリューション:

フォームデータの構造を確認するには:

console.log([...formData])

各Key-Valueペアを表示するには:

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

2

以下は、FormDataオブジェクトのエントリをオブジェクトとしてコンソールに記録する関数です。

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

MDN文書オン .entries()

.next()および上のMDNドキュメント.done


2
  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

+ IE 11と互換性がありませんfor...of..。頭痛 !
Delphine

2

FormData::entries()がのインスタンスを返すことを理解する必要がありますIterator

次の例のフォームを使用します。

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

そしてこのJSループ:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

2

angular 7では、以下のコード行を使用してコンソールにエントリを取得しました。

formData.forEach(entries => console.log(entries));

2

すでに回答済みですが、送信されたフォームから簡単な方法で値を取得したい場合は、spread演算子と新しいMapイテラブルの作成を組み合わせて使用​​すると、優れた構造を取得できます。

new Map([...new FormData(form)])


ただし、これにはinp_nam [some_mult] []に問題があります
ハーフビット'21年

2

の中typeScriptangular 6、このコードは私のために働いています。

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

またはすべての値:

console.log(formData.getAll('name')); // return all values

1

この機能を試してください:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}

2
このコードスニペットが解決策になる可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
ヨハン

0

MDNは示唆して次のような形式に:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

あるいは

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

ブラウザまたは環境が最新のJavaScriptおよびFormData APIをサポートしていない場合は、ES +ポリフィルを追加することを検討してください。

これがお役に立てば幸いです。


このコードを実行する前にテストしましたか?formData()まず、大文字にする必要があります。また、for ... of loopインライン3は暗黙的にFormData.entriesを呼び出していますnew FormData()[Symbol.iterator]。これは、コンソールで実行すると確認できます。あなたがFormData.entriesをサポートしていないエッジのようなブラウザ、でこれを実行する場合最後に、あなたは、このようないるFormDataオブジェクトで利用できるメソッド名を印刷など、予期しない結果を取得:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'
Lovethenakedgun
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.