DEV Community

Cover image for How to display FormData object values in Javascript
Tuomo Kankaanpää
Tuomo Kankaanpää

Posted on • Originally published at codepulse.blog

6 2

How to display FormData object values in Javascript

This post was originally published at codepulse.blog on May 25, 2019.

If you are working with Javascript and sending data to server, especially when you need to send files, you might have run into FormData object. It is handy way to form set of key/value pairs that represent form fields and values. You will most likely run into a situation where you want to inspect your FormData object. Normally you could just console.log the object, but this doesn’t work with FormData object.

If you console.log FormData object, you will just get empty object logged to the console. What you need to do is use entries property. Here is how you can log all key/value pairs to console using entries property.

var formData = new FormData();
formData.append('key_one', 'First value');
formData.append('key_two', 'Second value');
formData.append('key_three', 'Thrid value');
// Log the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ' - ' + pair[1]); 
}
Enter fullscreen mode Exit fullscreen mode

This logs the following to the console:

key_one - First value
key_two - Second value
key_three - Thrid value
Enter fullscreen mode Exit fullscreen mode

FormData.entries() returns array of the form data key/value pairs. Each row in the array contains one key/value pair. So item key is in the index 0 and item value is in the index 1.

Logging the values is just one example on what you can do with the key/value pairs. If you need to inspect the values of a FormData object for some other purpose, it is obviously easy to do using the entries property.

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay