Get All Items from HTML5 FormData Object - HTML5

Question

I have been working with the HTML5 FormData object and I can't seem to figure out how to find what data it holds. I need to access it for debugging purposes.

https://developer.mozilla.org/en-US/docs/Web/API/FormData1

There are functions like

FormData::get([name]);

but I don't know the names. It would be nice to have something like the following:

FormData::dumpData();

What is a good way to view all of the data in a FormData object?

Update

Here is an example of the FormData object:

Answer 1

All the functions for FormData aren't available in all browsers by default. However, you can enable them in some. Checkout the docs for browser compatibility.

In Chrome, you'll be able to enable full access to these functions by enabling Enable experimental Web Platform feature under the browser flags section. Navigate to chrome://flags/ in the browser to find this option.

Once you've enable this feature and reloaded, you should be able to run the following to view all your FormData, data:

var formData    = new FormData(this);
var formKeys    = formData.keys();
var formEntries = formData.entries();

do {
  console.log(formEntries.next().value);
} while (!formKeys.next().done)

Granted, there are probably better ways to iterate over this data structure, although it is certainly one way to view all the K/V pairs in your FormData object dynamically.