• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Convert FormData To JSON Object

Javascript · September 28, 2017

Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object does not work in the way you would want it to for JSON.

Using the for..of syntax introduced in ECMAScript 2015, we can access the form data entries and iterate over them to get key and value pairs. This will be the verbose solution, scroll to the bottom to get the cleaner solution using .reduce below.

const formData = new FormData(SomeFormElement).entries();
let jsonObject = {};

for (const [key, value]  of formData) {
    jsonObject[key] = value;
}

By calling entries on our form data object, it returns the required iterable data we can then access in the form of key and value. In our above example, we actually store each item in an object.

Fortunately, this isn’t a complicated problem to solve. If we had to do this without a for..of loop, then it wouldn’t be nearly as clean as the above solution is (which can still be improved).

Now, let’s make it more readable by using reduce which can work with .entries to create our object in a slightly cleaner way.

const formData = new FormData(SomeFormElement).entries();

const jsonObject = formData.reduce((acc, [key, val]) => {
  acc[key] = val;
  return acc;
}, {});

Dwayne

Leave a Reply Cancel reply

6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
leo
leo
3 years ago

Thank you !! 🙂

1
aretheregods
aretheregods
3 years ago

You don’t need to use .entries(). You can use the formdata directly in the for…of.

8
JD
JD
3 years ago

Thanks for sharing.

Does not work with multiple keys (Used to have an array in our backend)

0
Fede
Fede
3 years ago

Thanks man

0
Thomas Rieder
Thomas Rieder
2 years ago

Be aware if you want to send the jsonObject to API which expects JSON it will not work since the JSON keys are not strings (with “).
To convert into valid JSON you still need call JSON.stringify(jsonObject).

0
Ali Yılmaz
Ali Yılmaz
1 year ago

When we want to upload multiple files, there is a problem, we only get one file information. How can we provide multi-file support?

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Removing A Character From The Start/End of a String In Javascript
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz