DEV Community

Cover image for How to easily convert HTML Form to JSON

How to easily convert HTML Form to JSON

Jordan Finneran on December 21, 2020

Contents Intro Form Data Gotcha's Examples Summary Intro I have a love, but sometimes hate, relationship with HTML Forms....
Read full post
Collapse
 
ndrean profile image
NDREAN •

you can also try Object.fromEntries([...formData])

Collapse
 
austingil profile image
Austin Gil •

In fact, you don't event need the [...]. You can just do Object.fromEntries(formData) :)

Collapse
 
jordanfinners profile image
Jordan Finneran •

Oh, nice that's even simpler! If you don't have the 'inputs with same name' gotcha.

Thread Thread
 
austingil profile image
Austin Gil •

Right. Do you have examples of inputs with the same name? I can only think of radio inputs, but in that case, it will only take the one that was selected. You probably know some other use-cases though.

Thread Thread
 
jordanfinners profile image
Jordan Finneran •

It probably not that common but if you want a list of things a user could check.

For example, if there was a list of languages as checkbox inputs, they could check each one they knew and the output of the Full Example would give you an Array of the languages the user knows.
If you open the Interactive Example in JSFiddle you can see the console output for this :)

Thread Thread
 
ndrean profile image
NDREAN •

I have a question; does this make sense if you use name="lang[js]" and name="lang[py]" ?

Thread Thread
 
jordanfinners profile image
Jordan Finneran •

You could also do this. It depends what processing you want to do afterwards. :)
I've included both in here jsfiddle.net/8fL3vra1/
Where you can run it, what you get is:

{
  lang[js]: "on",
  lang[py]: "on",
  languages: ["javascript", "python"]
}
Enter fullscreen mode Exit fullscreen mode

My personal preference is to get the list of items but it's completely up to you how you want to achieve it :D

Thread Thread
 
austingil profile image
Austin Gil •

Oh yeah, that would make sense. I usually give each checkbox its own name, and if they are related, I put them inside a <fieldset>. I'll need to remember this if I'm working with objects and want a list.

Usually I just wrap the data in a URLSearchParams and send it to the backend like that. URLSearchParams will handle the list if there are multiple entries with the same name.

document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target)
  const params = new URLSearchParams(formData)

  fetch(`https://example.com?${params.toString()}`)

  fetch(`https://example.com`, {
    method: 'POST',
    body: params
  })

  e.preventDefault()
})
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
ndrean profile image
NDREAN • • Edited

If you POST, I believe you can do directly body: new FormData(e.target)
if you GET and adjoin a query string, you may indeed need URLSearchParams

Thread Thread
 
austingil profile image
Austin Gil •

Ah yes. This is true. My only issue with this is using FormData in the request body changes the request headers from the default application/x-www-form-urlencoded to multipart/form-data. This has caused me issues before, so I try to avoid it.

Collapse
 
antonio_pangall profile image
Antonio Pangallo •

Hi Jordan, nice post. If you use Reactjs you may be also interested on iusehooks.github.io/usetheform/ . It handles forms state in react and much more.

Collapse
 
jordanfinners profile image
Jordan Finneran • • Edited

Thank you for the comment. :)
Is this a library you've written?

Collapse
 
antonio_pangall profile image
Antonio Pangallo •

Hi, yes I did write it :)