If we have an HTML form, then the entered data may be stored in an object that’s created from the FormData instance.
In this article, we’ll look at how to inspect the object created from the FormData constructor.
The for-of Loop with the entries Method
We can use the for-of loop to loop through the key-value pairs of the FormData instance to inspect their values.
To get the key-value pairs, we can use the entries method of the FormData instance to return the key-value pairs in an array.
For example, we can write:
const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
for (const [key, value] of formData.entries()) {
console.log(key, value);
}
Then we get:
key1 value1
key2 value2
We create the formData object with the FormData constructor.
Then we call append with the key and value respectively to add the entry to the formData object.
Next, we call formData.entries to return an array with the key-value pairs in an array.
In the for-of loop, we destructure the key-value pairs and log them with console.log .
Omit the entries Method
We can omit the entries method since formData is an iterable object.
It has an iterator to return the key-value pairs.
Therefore, we can shorten it to:
const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
for (const [key, value] of formData) {
console.log(key, value);
}
Object.fromEntries
We can also use Object.fromEntries to get the key-value pairs into an object that we can inspect easily.
This works because it a FormData instance has an iterator that returns the key-value pair arrays in an array.
For instance, we can write:
const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
console.log(Object.fromEntries(formData))
Then we get:
{key1: "value1", key2: "value2"}
from the console log.
Using the Response Constructor
We can use the Response constructor to convert the FormData instance to text we can inspect easily.
For instance, we can write:
const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
(async () => {
const text = await new Response(formData).text()
console.log(text)
})()
The text method returns a promise, so we put it in an async function.
Then text is something like:
------WebKitFormBoundaryzCHPG30oZJEPIn1B
Content-Disposition: form-data; name="key1"
value1
------WebKitFormBoundaryzCHPG30oZJEPIn1B
Content-Disposition: form-data; name="key2"
value2
------WebKitFormBoundaryzCHPG30oZJEPIn1B--
If we only care about inspecting it, then we can use the text method.
Conclusion
There’re several ways to inspect a FormData instance.
It’s an iterable object, so we can use the for-of loop with it.
Also, we can convert it to a Response instance and use the text method to inspect it.
