javascript 如何检查FormData？

How to inspect FormData?

提问by Ryan Endacott

I've tried console.logand looping through it using for in.

我已经尝试 console.log使用for in.

Here it the MDN Referenceon FormData.

这里是FormData 上的MDN 参考。

Both attempts are in this fiddle.

这两种尝试都在这个小提琴中。

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

How can I inspect form data to see what keys have been set.

如何检查表单数据以查看已设置的键。

回答by Ryan Endacott

Updated Method:

更新方法：

As of March 2016, recent versions of Chrome and Firefox now support using FormData.entries()to inspect FormData. Source.

截至 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]); 
}

Thanks to Ghost Echoand rlothfor pointing this out!

感谢Ghost Echo和rloth指出这一点！

Old Answer:

旧答案：

After looking at theseMozillaarticles, it looks like there is no way to get data out of a FormData object. You can only use them for building FormData to send via an AJAX request.

看了这些Mozilla文章后，似乎没有办法从 FormData 对象中获取数据。您只能使用它们来构建通过 AJAX 请求发送的 FormData。

I also just found this question that states the same thing: FormData.append("key", "value") is not working.

我也刚刚发现这个问题说明了同样的事情：FormData.append("key", "value") is not working。

One way around this would be to build up a regular dictionary and then convert it to FormData:

解决此问题的一种方法是构建一个常规字典，然后将其转换为 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]);
}

If you want to debug a plain FormData object, you could also send it in order to examine it in the network request console:

如果你想调试一个普通的 FormData 对象，你也可以发送它以便在网络请求控制台中检查它：

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

回答by Endless

Short answer

简答

console.log(...fd)

Longer answer

更长的答案

If you would like to inspect what the raw body would look like then you could use the Response constructor(part of fetch API)

如果您想检查原始正文的外观，则可以使用Response 构造函数（fetch API 的一部分）

var fd = new FormData

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

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

Some of wish suggest logging each entry of entries, but the console.logcan also take multiple arguments
console.log(foo, bar)
To take any number of argument you could use the applymethod and call it as such: console.log.apply(console, array).
But there is a new ES6 way to apply arguments with spread operatorand iterator
console.log(...array).

一些希望建议记录条目的每个条目，但console.log也可以采用多个参数
console.log(foo, bar)
要采用任意数量的参数，您可以使用该apply方法并像这样调用它：console.log.apply(console, array)。
但是有一种新的 ES6 方法可以使用扩展运算符和迭代器来应用参数
console.log(...array)。

Knowing this, And the fact that FormData and both array's has a Symbol.iteratormethod in it's prototype you could just simply do this without having to loop over it, or calling .entries()to get the the hold of iterator

知道这一点，并且事实上 FormData 和两个数组的Symbol.iterator原型中都有一个方法，你可以简单地做到这一点，而不必循环它，或者调用.entries()以获取迭代器的保持

var fd = new FormData

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

console.log(...fd)

回答by Ghost Echo

I use the formData.entries()method. I'm not sure about all browser support, but it works fine on Firefox.

我用的formData.entries()方法。我不确定所有浏览器支持，但它在 Firefox 上运行良好。

Taken from https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

取自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]); 
}

There is also formData.get()and formData.getAll()with wider browser support, but they only bring up the Values and not the Key. See the link for more info.

还有formData.get()和formData.getAll()与更广泛的浏览器支持，但他们只带来了价值，而不是重点。查看链接了解更多信息。

回答by Luc

In certain cases, the use of :

在某些情况下，使用：

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

is impossible.

是不可能的。

I've used this code in replacement :

我用这个代码代替：

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

It's not a very smart code, but it works...

这不是一个非常聪明的代码，但它有效......

Hope it's help.

希望它有帮助。

回答by Gurkan Yesilyurt

When I am working on Angular 5+ (with TypeScript 2.4.2), I tried as follows and it works except a static checking error but also for(var pair of formData.entries())is not working.

当我使用 Angular 5+（使用 TypeScript 2.4.2）时，我尝试了以下方法，除了静态检查错误外，它可以for(var pair of formData.entries())正常工作，但也 无法正常工作。

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

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

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

Check at Stackblitz

在 Stackblitz 查看

回答by Hooray Im Helping

ES6+ solutions:

ES6+解决方案：

To see the structure of form data:

查看表单数据的结构：

console.log([...formData])

To see each key-value pair:

查看每个键值对：

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

回答by Asifali

Easy Method

简单的方法

I used this code in angular 8

我在 angular 8 中使用了这段代码

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

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

回答by ngr

Already answered but if you want to retrieve values in an easy way from a submitted form you can use the spread operator combined with creating a new Map iterable to get a nice structure.

已经回答，但如果您想以简单的方式从提交的表单中检索值，您可以使用传播运算符并结合创建一个新的 Map 可迭代来获得一个很好的结构。

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

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

回答by Yousuf

In angular 7 i got entries on console using below line of code.

在 angular 7 中，我使用下面的代码行在控制台上获得了条目。

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

回答by 2540625

Here's a function to log entries of a FormData object to the console as an object.

这是一个将 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 doc on .entries()

MDN 文档 .entries()

MDN doc on .next()and .done

MDN 文档.next()和.done