How to Display JavaScript FormData Object Values?

It may come as a surprise to some, but FormData object values cannot directly be displayed / inspected (for example when you use FormData with console.log). Luckily, it's not super hard to work around this.

Before we dive into it, for all the examples in this article, let's assume we have the following FormData object we want to inspect:

const formData = new FormData();

formData.append('name', 'john');
formData.append('langs[]', 'english');
formData.append('langs[]', 'deutsch');

Using the Spread Operator

By simply using the spread operator we can get all of FormData object elements:

console.log(...formData);

// output:
// ["name", "john"]
// ["langs[]", "english"]
// ["langs[]", "deutsch"]

Converting the FormData Object Into an Array

Using the spread operator we can expand the FormData object elements into an actual array like so:

console.log([ ...formData ]);

/* output: [
    ["name", "john"],
    ["langs[]", "english"],
    ["langs[]", "deutsch"]
] */

As you can see, the resulting array is an array of arrays containing key/value pairs which may make it more readable as it groups all the values together.

Iterating Through Elements of FormData Object

Using formData.entries() with the for...of loop, we can iterate through the FormData object elements. For example:

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

// output:
// "name", "john"
// "langs[]", "english"
// "langs[]", "deutsch"

Using the Response Object

Using the fetch API's Response object, you can inspect what the raw body would look like when you submit the formData. For example:

new Response(formData).text().then(console.log);

/* output:
    ------WebKitFormBoundary7qfIBPBQUb04gV4w
    Content-Disposition: form-data; name="name"

    john

    ------WebKitFormBoundary7qfIBPBQUb04gV4w
    Content-Disposition: form-data; name="langs[]"

    english

    ------WebKitFormBoundary7qfIBPBQUb04gV4w
    Content-Disposition: form-data; name="langs[]"

    deutsch
*/