How to convert FormData HTML5 object to JSON

Question

How do I convert the entries from a HTML5 FormData object to JSON  The solution should not use jQuery  Also  it should not simply serialize the entire FormData object  but only its key value entries

User · Answer

I am arriving late here  However  I made a simple method that checks for the input type  checkbox   var formData   new FormData  form get 0            var objectData               formData forEach function  value  key                var updatedValue   value              if     input name      key         attr  type        checkbox   amp  amp     input name      key         is   checked                      updatedValue   true     we don t set false due to it is by default on HTML                           objectData key    updatedValue              var jsonData   JSON stringify objectData     I hope this helps somebody else

User · Answer

If the following items meet your needs  you re in luck    You want to convert an array of arrays like    key   value1      key2   value2    like what FormData gives you  into a key- value object like  key1   value1   key2   value2   and the convert it to a JSON string  You are targeting browsers devices with the latest ES6 interpreter or are compiling with something like babel  You want the tiniest way to accomplish this    Here is the code you ll need   const data   new FormData document querySelector  form     const json   JSON stringify Array from data  reduce  o  k v    gt  o k  v o          Hope this helps someone

User · Answer

Worked for me                   var myForm   document getElementById  form                    var formData   new FormData myForm                   obj                       for  var entry of formData entries                         obj entry 0     entry 1                                     console log obj

User · Answer

If you need support for serializing nested fields  similar to how PHP handles form fields  you can use the following function   x000D   x000D  function update data  keys  value    x000D    if  keys length     0    x000D         Leaf node x000D      return value  x000D      x000D   x000D    let key   keys shift    x000D    if   key    x000D      data   data        x000D      if  Array isArray data     x000D        key   data length  x000D        x000D      x000D   x000D       Try converting key to a numeric value x000D    let index    key  x000D    if   isNaN index     x000D         We have a numeric index  make data a numeric array x000D         This will not work if this is a associative array  x000D         with numeric keys x000D      data   data        x000D      key   index  x000D      x000D     x000D       If none of the above matched  we have an associative array x000D    data   data        x000D   x000D    let val   update data key   keys  value   x000D    data key    val  x000D   x000D    return data  x000D    x000D   x000D  function serializeForm form    x000D    return Array from  new FormData form   entries    x000D       reduce  data   field  value     gt    x000D        let     prefix  keys    field match                                x000D   x000D        if  keys    x000D          keys   Array from keys matchAll               g   m   gt  m 1    x000D          value   update data prefix   keys  value   x000D          x000D        data prefix    value  x000D        return data  x000D              x000D    x000D   x000D  document getElementById  output   textContent   JSON stringify serializeForm document getElementById  form     null  2   x000D   lt form id  form  gt  x000D     lt input name  field1  value  Field 1  gt  x000D     lt input name  field2    value  Field 21  gt  x000D     lt input name  field2    value  Field 22  gt  x000D     lt input name  field3 a   value  Field 3a  gt  x000D     lt input name  field3 b   value  Field 3b  gt  x000D     lt input name  field3 c   value  Field 3c  gt  x000D     lt input name  field4 x  a   value  Field xa  gt  x000D     lt input name  field4 x  b   value  Field xb  gt  x000D     lt input name  field4 x  c   value  Field xc  gt  x000D     lt input name  field4 y  a   value  Field ya  gt  x000D     lt input name  field5 z  0   value  Field z0  gt  x000D     lt input name  field5 z     value  Field z1  gt  x000D     lt input name  field6 z  value  Field 6Z0  gt  x000D     lt input name  field6 z  value  Field 6Z1  gt  x000D   lt  form gt  x000D   x000D   lt h2 gt Output lt  h2 gt  x000D   lt pre id  output  gt  x000D   lt  pre gt  x000D   x000D   x000D

User · Answer

In 2019  this kind of task became super-easy   JSON stringify Object fromEntries formData      Object fromEntries  Supported in Chrome 73   Firefox 63   Safari 12 1

User · Answer

I ve seen no mentions of FormData getAll method so far  Besides returning all the values associated with a given key from within a FormData object  it gets really simple using the Object fromEntries method as specified by others here  var formData   new FormData document forms 0    var obj   Object fromEntries    Array from formData keys    map key   gt        key  formData getAll key  length  gt  1          formData getAll key    formData get key          Snippet in action  x000D   x000D  var formData   new FormData document forms 0    var obj   Object fromEntries Array from formData keys    map key   gt   key  formData getAll key  length  gt  1   formData getAll key    formData get key      document write   lt pre gt   JSON stringify obj   lt  pre gt    x000D   lt form action     gt     lt input name  name  value  Robinson    gt     lt input name  items  value  Vin    gt     lt input name  items  value  Fromage    gt     lt select name  animals  multiple id  animals  gt       lt option value  tiger  selected gt Tigre lt  option gt       lt option value  turtle  selected gt Tortue lt  option gt       lt option value  monkey  gt Singe lt  option gt     lt  select gt   lt  form gt  x000D   x000D   x000D

User · Answer

If you are using lodash it can be done concisely with fromPairs  import  fromPairs  from  lodash    const object   fromPairs Array from formData entries

User · Answer

This post is already a year old    but  I really  really like the ES6  dzuc answer  However it is incomplete by not been able to handle multiple selects or checkboxes  This has already pointed and code solutions has been offered  I find them heavy and not optimized  So I wrote a 2 versions based on  dzuc to handle these cases    For ASP style forms where multiple items name could just simple repeated    let r Array from fd  reduce     o    k v     gt           o k              o    k    v             o    k        o k    v                  let obj JSON stringify r     One line Hotshot version    Array from fd  reduce  o  k v    gt    o k       o  k  v      o  k      o k  v            For PHP style forms where the multiple item names must have a    suffix    let r Array from fd  reduce     o    k v     gt         k split      length gt 1         k k split      0            o k               o    k     v               o    k        o k    v                    o    k    v               let obj JSON stringify r     One line Hotshot version   Array from fd  reduce  o  k v    gt   k split      length gt 1   k k split      0    o k       o  k   v       o  k      o k  v        o  k  v           Extension of PHP form that support multi-level arrays    Since last time I wrote the previous second case  at work it came a case that the PHP form has checkboxes on multi-levels  I wrote a new case to support previous case and this one  I created a snippet to better showcase this case  the result show on the console for this demo  modify this to your need  Tried to optimize it the best I could without compromising performance  however  it compromise some human readability  It takes advantage that arrays are objects and variables pointing to arrays are kept as reference  No hotshot for this one  be my guest    x000D   x000D  let nosubmit    e    gt    x000D    e preventDefault    x000D    const f   Array from new FormData e target    x000D    const obj   f reduce  o   k  v     gt    x000D      let a   v  x000D        b  i  x000D        m   k split       x000D        n   m 0   x000D        l   m length  x000D      if  l  gt  1    x000D        a   b   o n         x000D        for  i   1  i  lt  l  i      x000D          m i     m i  split      0     b length    1  x000D          b   b m i       i   1     l    v   b m i          x000D          x000D        x000D      return      o   n   a    x000D            x000D    console log obj   x000D    x000D  document querySelector   theform   addEventListener  submit   nosubmit   capture  true    x000D   lt h1 gt Multilevel Form lt  h1 gt  x000D   lt form action     method  POST  enctype  multipart form-data  id  theform  gt  x000D     lt input type  hidden  name   id  value  93242    gt  x000D     lt input type  hidden  name   fid  value  45c0ec96929bc0d39a904ab5c7af70ef    gt  x000D     lt label gt Select  x000D       lt select name  uselect  gt  x000D         lt option value  A  gt A lt  option gt  x000D         lt option value  B  gt B lt  option gt  x000D         lt option value  C  gt C lt  option gt  x000D       lt  select gt  x000D     lt  label gt  x000D     lt br   gt  lt br   gt  x000D     lt label gt Checkboxes one level  lt br  gt  x000D       lt input name  c1    type  checkbox  checked value  1   gt v1  x000D       lt input name  c1    type  checkbox  checked value  2   gt v2 x000D       lt input name  c1    type  checkbox  checked value  3   gt v3 x000D     lt  label gt  x000D     lt br   gt  lt br   gt  x000D     lt label gt Checkboxes two levels  lt br  gt  x000D       lt input name  c2 0     type  checkbox  checked value  4   gt 0 v4  x000D       lt input name  c2 0     type  checkbox  checked value  5   gt 0 v5 x000D       lt input name  c2 0     type  checkbox  checked value  6   gt 0 v6 x000D       lt br  gt  x000D       lt input name  c2 1     type  checkbox  checked value  7   gt 1 v7  x000D       lt input name  c2 1     type  checkbox  checked value  8   gt 1 v8 x000D       lt input name  c2 1     type  checkbox  checked value  9   gt 1 v9 x000D     lt  label gt  x000D     lt br   gt  lt br   gt  x000D     lt label gt Radios  x000D       lt input type  radio  name  uradio  value  yes  gt YES x000D       lt input type  radio  name  uradio  checked value  no  gt NO x000D     lt  label gt  x000D     lt br   gt  lt br   gt  x000D     lt input type  submit  value  Submit    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Even though the answer from  dzuc is already very good  you could use array destructuring  available in modern browsers or with Babel  to make it even a bit more elegant      original version from  dzuc const data   Array from formData entries       reduce  memo  pair    gt            memo       pair 0   pair 1                 with array destructuring const data   Array from formData entries       reduce  memo  key  value     gt            memo       key   value

User · Answer

I think this is the simplest way to get the result you want from a formData FormData object  const jsonData        for const  key  value  of formData        jsonData key    value

User · Answer

If you have multiple entries with the same name  for example if you use  lt SELECT multiple gt  or have multiple  lt INPUT type  checkbox  gt  with the same name  you need to take care of that and make an array of the value  Otherwise you only get the last selected value    Here is the modern ES6-variant   function formToJSON  elem       let output         new FormData  elem   forEach        value  key     gt             Check if property already exist       if   Object prototype hasOwnProperty call  output  key               let current   output  key            if    Array isArray  current                    If it s not an array  convert it to an array            current   output  key       current                      current push  value       Add the new value to the array          else           output  key     value                       return JSON stringify  output        Slightly older code  but still not supported by IE11  since it doesn t support ForEach or entries on FormData   function formToJSON  elem       var current  entries  item  key  output  value    output         entries   new FormData  elem   entries         Iterate over values  and assign to item    while   item   entries next   value                  assign to variables to make the code more readable        key   item 0         value   item 1            Check if key already exist       if  Object prototype hasOwnProperty call  output  key             current   output  key            if    Array isArray  current                    If it s not an array  convert it to an array            current   output  key       current                      current push  value       Add the new value to the array          else           output  key     value                    return JSON stringify  output

User · Answer

Here s a way to do it in a more functional style  without the use of a library   Array from formData entries    reduce  memo  pair    gt          memo     pair 0    pair 1                Example    x000D   x000D  document getElementById  foobar   addEventListener  submit    e    gt    x000D    e preventDefault    x000D   x000D    const formData   new FormData e target   x000D    const data   Array from formData entries    reduce  memo  pair    gt     x000D         memo  x000D       pair 0    pair 1   x000D             x000D    document getElementById  output   innerHTML   JSON stringify data   x000D      x000D   lt form id  foobar  gt  x000D     lt input name  baz    gt  x000D     lt input type  submit    gt  x000D   lt  form gt  x000D   x000D   lt pre id  output  gt Input some value and submit lt  pre gt  x000D   x000D   x000D

User · Answer

In my case form Data was data   fire base was expecting an object but data contains object as well as all other stuffs so i tried data value it worked

User · Answer

Abusive one-liner   Array from fd  reduce  obj   k  v     gt       obj   k   v           Today I learned firefox has object spread support and array destructuring

User · Answer

FormData method  entries and the for of expression is not supported in IE11 and Safari     Here is a simplier version to support Safari  Chrome  Firefox and Edge  function formDataToJSON formElement            var formData   new FormData formElement           convertedJSON            formData forEach function value  key             convertedJSON key    value               return convertedJSON      Warning  this answer doesn t work in IE11  FormData doesn t have a forEach method in IE11  I m still searching for a final solution to support all major browsers

User · Answer

You can achieve this by using the FormData   object  This FormData object will be populated with the form s current keys values using the name property of each element for the keys and their submitted value for the values  It will also encode file input content   Example   var myForm   document getElementById  myForm    myForm addEventListener  submit   function event        event preventDefault        var formData   new FormData myForm           result            for  var entry of formData entries                  result entry 0     entry 1             result   JSON stringify result      console log result

User · Answer

You can try this  formDataToJSON     form example        Create a function to convert the serialize and convert the form data   to JSON    param       form example       return a JSON Stringify function formDataToJSON form        let obj           let formData   form serialize        let formArray   formData split   amp          for  inputData of formArray           let dataTmp   inputData split               obj dataTmp 0     dataTmp 1             return JSON stringify obj

User · Answer

Easy To Use Function  I Have Created A Function For This   function FormDataToJSON FormElement           var formData   new FormData FormElement       var ConvertedJSON          for  const  key  value   of formData entries                  ConvertedJSON key    value             return ConvertedJSON     Example Usage  var ReceivedJSON   FormDataToJSON document getElementById  FormId       In this code I have created empty JSON variable using for loop I have used keys from formData Object to JSON Keys in every Itration   You Find This Code In My JS Library On GitHub Do Suggest Me If It Needs Improvement I Have Placed Code Here https   github com alijamal14 Utilities blob master Utilities js

User · Answer

You could also use forEach on the FormData object directly  var object       formData forEach function value  key       object key    value      var json   JSON stringify object     UPDATE  And for those who prefer the same solution with ES6 arrow functions  var object       formData forEach  value  key    gt  object key    value   var json   JSON stringify object    UPDATE 2  And for those who want support for multi select lists or other form elements with multiple values  since there are so many comments below the answer regarding this issue I will add a possible solution   var object       formData forEach  value  key    gt           Reflect has in favor of  object hasOwnProperty key      if  Reflect has object  key            object key    value          return            if  Array isArray object key             object key     object key                  object key  push value       var json   JSON stringify object    Here a Fiddle demonstrating the use of this method with a simple multi select list  UPDATE 3  As a side note for those ending up here  in case the purpose of converting the form data to json is to send it through a XML HTTP request to a server you can send the FormData object directly without converting it  As simple as this  var request   new XMLHttpRequest    request open  quot POST quot    quot http   example com submitform php quot    request send formData    See also Using FormData Objects on MDN for reference  UPDATE 4  As mentioned in one of the comments below my answer the JSON stringify method won t work out of the box for all types of objects  For more information on what types are supported I would like to refer to the Description section in the MDN documentation of JSON stringify  In the description is also mentioned that   If the value has a toJSON   method  it s responsible to define what data will be serialized   This means that you can supply your own toJSON serialization method with logic for serializing your custom objects  Like that you can quickly and easily build serialization support for more complex object trees

[javascript] How to convert FormData (HTML5 object) to JSON

Examples related to javascript

Examples related to json

Examples related to form-data