How to inspect FormData?

How to inspect FormData?

I’ve tried console.log and looping through it using for in.
Here it the MDN Reference on FormData.
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.

Solutions/Answers:

Solution 1:

Updated Method:

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

// 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 Echo and rloth for pointing this out!

Old Answer:

After looking at these Mozilla articles, 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.

Related:  Write formatted JSON in Node.js

I also just found this question that states the same thing: 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:

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:

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

Solution 2:

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

Taken from 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.

Solution 3:

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)

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.log can also take multiple arguments
console.log(foo, bar)
To take any number of argument you could use the apply method and call it as such: console.log.apply(console, array).
But there is a new ES6 way to apply arguments with spread operator and iterator
console.log(...array).

Knowing this, And the fact that FormData and both array’s has a Symbol.iterator method 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

var fd = new FormData

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

console.log(...fd)

Solution 4:

In certain cases, the use of :

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

is impossible.

Related:  jQuery - Set min-height of div

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.

Solution 5:

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.

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

Solution 6:

ES6+ solutions:

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