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.
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.
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); 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.
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 argumentsconsole.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 iteratorconsole.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)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.
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) { }, }); } 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) });Here's a function to log entries of a FormData object to the console as an object.
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); }; You have to understand that FormData::entries() returns an instance of Iterator.
Take this example form:
<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> and this JS-loop:
<script> var it = new FormData( document.getElementById('form-id') ).entries(); var current = {}; while ( ! current.done ) { current = it.next(); console.info( current ) } </script> Try this ::
let formdata = new formData() formdata.append('name', 'Alex Johnson') for(let i of formdata){ console.log(i) }