Check out FormData: a step-by-step guide

Question

I've tried console.log and looping it using for in.

Here is the MDN reference for 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 to check the form data to see which keys have been set.

Answer 1

Some short answers

[...fd] // shortest devtool solution
Array.from(fd) // Same as above
console.log(...fd) // shortest script solution
console.log([...fd]) // Think 2D array makes it more readable
console.table([...fd]) // could use console.table if you like that
console.log(Object.fromEntries(fd)) // Works if all fields are uniq
console.table(Object.fromEntries(fd)) // another representation in table form
new Response(fd).text().then(console.log) // To see the entire raw body

Longer answer

Others have suggested logging each entry of fd.entries(), but console.log can also take multiple arguments
console.log(foo , bar, ...)
To accept any number of arguments, you can use the apply method and call it as follows: console.log.apply(console,array ).
But there is a new ES6 way to do this using spread operator and iterator
console.log(...array).

Know this, and the fact that both FormData and arrays have a Symbol.iterator method specifies the default for in its prototype. ..of loop, then you can use ...iterable to expand the parameters without having to call the formData.entries() method (because this is the default function) if you If you like, you can execute for (x of formData)

var fd = new FormData()

fd.append('key1', 'value1')
fd.append('key2', 'value2')
fd.append('key2', 'value3')

// using it's default for...of specified by Symbol.iterator
// Same as calling `fd.entries()`
for (let [key, value] of fd) {
  console.log(`${key}: ${value}`)
}

// also using it's default for...of specified by Symbol.iterator    
console.log(...fd)

// Only shows up in devtool (not here in this code snippet)
console.table([...fd])

// Don't work in IE (use last pair if same key is used more)
console.log(Object.fromEntries(fd))

If you want to check what the original body looks like, then you can use the response constructor (part of the Get API), which will convert your form data to what it actually looks like when you upload the form data

var fd = new FormData()

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

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

Answer 2

Update method:

As of March 2016, the latest versions of Chrome and Firefox now support checking FormData using FormData.entries(). 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:

Looking at these Mozilla articles, it looks like there is no way to get the data from the FormData object. You can only use them to build FormData to send via AJAX requests.

I also just found this question saying the same thing: FormData.append("key", "value") doesn't work .

One way to solve this problem is to build 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 can also send it to inspect it in the Network Requests console:

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