Completing this type of task became exceptionally simple in 2019.

JSON.stringify(Object.fromEntries(formData));

Object.fromEntries: Compatibility with Chrome 73+, Firefox 63+, Safari 12.1

It's worth noting that please pay attention: FormData may contain multiple values with the same key (e.g. checkboxes with the same name). Object.fromEntries() eliminates duplicates and retains only the last one.

Here is a method to achieve this in a more functional manner, eliminating the need for any external library.

Array.from(formData.entries()).reduce((accumulator, [key, value]) => ({
  ...accumulator,
  [key]: value,
}), {});

For instance:

document.getElementById('foobar').addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(event.target);
  const data = Array.from(formData.entries()).reduce((accumulator, [key, value]) => ({
    ...accumulator,
    [key]: value,
  }), {});
  document.getElementById('output').innerHTML = JSON.stringify(data);
});

<form id='foobar'>
  <input name='baz' />
  <input type='submit' />
</form>

<pre id='output'>Enter a value and submit</pre>

There has been no mention of the FormData.getAll method up to this point.

In addition to fetching all values associated with a specific key from a FormData object, you can simplify it further by using the Object.fromEntries method as demonstrated elsewhere in this thread.

var formData = new FormData(document.forms[0])

var obj = Object.fromEntries(
  Array.from(formData.keys()).map(key => [
    key, formData.getAll(key).length > 1 ? 
      formData.getAll(key) : formData.get(key)
  ])
)

See the snippet below in action

var formData = new FormData(document.forms[0])

var obj = Object.fromEntries(Array.from(formData.keys()).map(key => [key, formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key)]))

document.write(`<pre>${JSON.stringify(obj)}</pre>`)

<form action="#">
  <input name="name" value="Robinson" />
  <input name="items" value="Vin" />
  <input name="items" value="Fromage" />
  <select name="animals" multiple id="animals">
    <option value="tiger" selected>Tigre</option>
    <option value="turtle" selected>Tortue</option>
    <option value="monkey">Singe</option>
  </select>
</form>

If you happen to have multiple entries sharing the same name, such as when using <SELECT multiple> or having multiple <INPUT type="checkbox"> elements with identical names, it's important to handle this situation by creating an array of values. Otherwise, you will only receive the value of the last selected entry.

Below is the updated ES6 version:

function convertFormToJSON( element ) {
  let result = {};
  new FormData( element ).forEach(
    ( value, key ) => {
      if ( Object.prototype.hasOwnProperty.call( result, key ) ) {
        let currentData = result[ key ];
        if ( !Array.isArray( currentData ) ) {
          currentData = result[ key ] = [ currentData ];
        }
        currentData.push( value );
      } else {
        result[ key ] = value;
      }
    }
  );
  return JSON.stringify( result );
}

The following code snippet is older and not supported by IE11 due to its lack of support for ForEach or entries on FormData:

function convertFormToJSON( element ) {
  var currentData, formDataEntries, item, key, result, value;
  result = {};
  formDataEntries = new FormData( element ).entries();
  
  while ( item = formDataEntries.next().value )
    {
      key = item[0];
      value = item[1];
      
      if (Object.prototype.hasOwnProperty.call( result, key)) {
        currentData = result[ key ];
        if ( !Array.isArray( currentData ) ) {
          currentData = result[ key ] = [ currentData ];
        }
        currentData.push( value );
      } else {
        result[ key ] = value;
      }
    }
    return JSON.stringify( result );
  }

If you require assistance with serializing nested fields, similar to the way PHP manages form fields, you can make use of the below function.

function updateFields(data, keys, value) {
  if (keys.length === 0) {
    // Leaf node
    return value;
  }

  let key = keys.shift();
  if (!key) {
    data = data || [];
    if (Array.isArray(data)) {
      key = data.length;
    }
  }

  // Try converting key to a numeric value
  let index = +key;
  if (!isNaN(index)) {
    // We have a numeric index, make data a numeric array
    // This will not work if this is an associative array 
    // with numeric keys
    data = data || [];
    key = index;
  }
  
  // If none of the above matched, we have an associative array
  data = data || {};

  let updatedValue = updateFields(data[key], keys, value);
  data[key] = updatedValue;

  return data;
}

function serializeFormData(form) {
  return Array.from((new FormData(form)).entries())
    .reduce((data, [field, value]) => {
      let [_, prefix, keys] = field.match(/^([^\[]+)((?:\[[^\]]*\])*)/);

      if (keys) {
        keys = Array.from(keys.matchAll(/\[([^\]]*)\]/g), m => m[1]);
        value = updateFields(data[prefix], keys, value);
      }
      data[prefix] = value;
      return data;
    }, {});
}

document.getElementById('output').textContent = JSON.stringify(serializeFormData(document.getElementById('form')), null, 2);

<form id="form">
  <input name="field1" value="Field 1">
  <input name="field2[]" value="Field 21">
  <input name="field2[]" value="Field 22">
  <input name="field3[a]" value="Field 3a">
  <input name="field3[b]" value="Field 3b">
  <input name="field3[c]" value="Field 3c">
  <input name="field4[x][a]" value="Field xa">
  <input name="field4[x][b]" value="Field xb">
  <input name="field4[x][c]" value="Field xc">
  <input name="field4[y][a]" value="Field ya">
  <input name="field5[z][0]" value="Field z0">
  <input name="field5[z][]" value="Field z1">
  <input name="field6.z" value="Field 6Z0">
  <input name="field6.z" value="Field 6Z1">
</form>

<h2>Output</h2>
<pre id="output">
</pre>

To accomplish this task, utilize the FormData() object. The FormData object will store all current key/value pairs from the form by using the element's name property as the keys and their respective submitted values as the values. It will also handle encoding file input data.

Here is an 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);

});

It's been a year since this post was created, but I still really appreciate the ES6 @dzuc answer. However, it lacks the ability to handle multiple selects or checkboxes. There have been suggestions and code solutions provided for this issue, but I find them too heavy and not optimized. To address this, I have written two versions based on @dzuc's solution:

• For ASP-style forms where items with multiple names can simply be repeated.

let r=Array.from(fd).reduce(
  (o , [k,v]) => (
     (!o[k])
     ? {...o , [k] : v}
     : {...o , [k] : [...o[k] , v]}
   )
   ,{}
);
let obj=JSON.stringify(r);

A more concise version in one line:

Array.from(fd).reduce((o,[k,v])=>((!o[k])?{...o,[k]:v}:{...o,[k]:[...o[k],v]}),{});

• For PHP-style forms where multiple item names must have a [] suffix.

let r=Array.from(fd).reduce(
  (o , [k,v]) => (
    (k.split('[').length > 1)
    ? (k=k.split('[')[0]
      , (!o[k])
      ? {...o , [k] : [v]}
      : {...o , [k] : [...o[k] , v ]}
    )
    : {...o , [k] : v}
  )
  ,{}
);
let obj=JSON.stringify(r);

A more concise version in one line:

Array.from(fd).reduce((o,[k,v])=>((k.split('[').length > 1)?(k=k.split('[')[0],(!o[k])?{...o,[k]:[v]}:{...o,[k]:[...o[k],v]}):{...o,[k]:v}),{});

• An extension of the PHP form that supports multi-level arrays.

Since writing the previous case last time, there was a scenario at work where the PHP form contained checkboxes on multiple levels. To address this, I created a new case that builds upon the previous solution. Below is a snippet showcasing this scenario with results displayed in the console. Feel free to modify it to suit your needs. I tried to optimize it for performance while maintaining functionality, although readability may have been compromised slightly. This approach takes advantage of arrays as objects and variables pointing to arrays are kept by reference. No single-line hotshot method available here, so feel free to make modifications as needed.

let nosubmit = (e) => {
  e.preventDefault();
  const f = Array.from(new FormData(e.target));
  const obj = f.reduce((o, [k, v]) => {
    let a = v,
      b, i,
      m = k.split('['),
      n = m[0],
      l = m.length;
    if (l > 1) {
      a = b = o[n] || [];
      for (i = 1; i < l; i++) {
        m[i] = (m[i].split(']')[0] || b.length) * 1;
        b = b[m[i]] = ((i + 1) == l) ? v : b[m[i]] || [];
      }
    }
    return { ...o, [n]: a };
  }, {});
  console.log(obj);
}
document.querySelector('#theform').addEventListener('submit', nosubmit, {capture: true});

<h1>Multi-Level Form</h1>
<form action="#" method="POST" enctype="multipart/form-data" id="theform">
  <input type="hidden" name="_id" value="93242" />
  <input type="hidden" name="_fid" value="45c0ec96929bc0d39a904ab5c7af70ef" />
  <label>Select:
    <select name="uselect">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </label>
  <br /><br />
  <label>Checkboxes one level:<br/>
    <input name="c1[]" type="checkbox" checked value="1"/>v1 
    <input name="c1[]" type="checkbox" checked value="2"/>v2
    <input name="c1[]" type="checkbox" checked value="3"/>v3
  </label>
  <br /><br />
  <label>Checkboxes two levels:<br/>
    <input name="c2[0][]" type="checkbox" checked value="4"/>0 v4 
    <input name="c2[0][]" type="checkbox" checked value="5"/>0 v5
    <input name="c2[0][]" type="checkbox" checked value="6"/>0 v6
    <br/>
    <input name="c2[1][]" type="checkbox" checked value="7"/>1 v7 
    <input name="c2[1][]" type="checkbox" checked value="8"/>1 v8
    <input name="c2[1][]" type="checkbox" checked value="9"/>1 v9
  </label>
  <br /><br />
  <label>Radios:
    <input type="radio" name="uradio" value="yes">YES
    <input type="radio" name="uradio" checked value="no">NO
  </label>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Check out this amazing function that converts a formData object into a JSON-string.

• It can handle multiple entries and nested arrays effortlessly.
• This function works seamlessly with both numbered and named input name arrays.

Imagine having form fields like these:

<select name="dropdown[]" multiple></select>
<input name="checkbox[a][0][]" type="checkbox" value="example"/>

Here's how you can use it:

let jsonData = convertFormDataToJson(formData);

The magic happens with this function:

function convertFormDataToJson(data) {
        
        let process = function (obj, pair) {
            
            let keys = pair[0].replace(/\]/g,'').split('[');
            let key = keys[0];
            let value = pair[1];
            
            if (keys.length > 1) {
                
                let i, x, segment;
                let lastVal = value;
                let dataType = isNaN(keys[1]) ? {} : [];
                
                value = segment = obj[key] || dataType;
                
                for (i = 1; i < keys.length; i++) {
                    
                    x = keys[i];
                    
                    if (i == keys.length-1) {
                        if (Array.isArray(segment)) {
                            segment.push(lastVal);
                        } else {
                            segment[x] = lastVal;
                        }
                    } else if (segment[x] == undefined) {
                        segment[x] = isNaN(keys[i+1]) ? {} : [];
                    }
                    
                    segment = segment[x];
                    
                }
                
            }
            
            obj[key] = value;
            
            return obj;
            
        }
        
        let jsonObj = Array.from(data).reduce(process,{});
        
        return JSON.stringify(jsonObj);
        
    }

Simplified Function for Converting Form Data to JSON

If you're looking for an easy way to convert form data to JSON, I've got you covered with this efficient function:

function FormDataToJSON(FormElement){    
    var formData = new FormData(FormElement);
    var ConvertedJSON= {};
    for (const [key, value]  of formData.entries())
    {
        ConvertedJSON[key] = value;
    }

    return ConvertedJSON
}

How to Use

var ReceivedJSON = FormDataToJSON(document.getElementById('FormId'));

In this code snippet, I demonstrate how the function creates a JSON object by iterating over form data keys and values.

You can access this helpful utility in my JavaScript library on GitHub. Feel free to suggest any improvements: https://github.com/alijamal14/Utilities/blob/master/Utilities.js

To simplify the process, you can utilize the following code snippet:

JSON.stringify(Object.fromEntries(formData));

If dealing with checkbox inputs or multiple select options, make use of the getAll function:

let formData = new FormData(form);
let obj = Object.fromEntries(new FormData(form));
let hobbies = formData.getAll('hobbies'); // 'hobbies' represents the name of the checkbox
let data = {...obj, hobbies: JSON.stringify(hobbies)};

Need to convert an array of arrays into a key->value object and then turn it into a JSON string? If so, you're in luck:

1. If you want to achieve this task efficiently with minimal code.
2. If you are working with modern browsers/devices supporting ES6 or using compilers like babel.
3. If you prefer simplicity in accomplishing the conversion.

Below is the code snippet that will help you achieve this:

const data = new FormData(document.querySelector('form'));
const json = JSON.stringify(Array.from(data).reduce((o,[k,v])=>(o[k]=v,o),{}));

Hopefully, this solution proves helpful to someone out there.

Here is a straightforward method for achieving your desired outcome with a formData FormData object:

const dataMap = {};

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

While @dzuc's answer is already quite good, you can enhance it by utilizing array destructuring (which is supported in modern browsers or with the use of Babel):

// original code snippet by @dzuc
const data = Array.from(formData.entries())
  .reduce((memo, pair) => ({
    ...memo,
    [pair[0]: pair[1],
  }), {})

// using array destructuring
const data = Array.from(formData.entries())
  .reduce((memo,[key, value]) => ({
    ...memo,
    [key]: value,
  }), {})

Insulting one-sentence!

Transform the elements of an array into an object using JavaScript's reduce method and ES6 syntax.

I just found out that Firefox now supports object spreading and array destructuring!

Here's an alternative method that is effective when dealing with select multiple or inputs with the same name attribute:

function convertFormToJson() {
  const formData = new FormData(document.querySelector('form'));
  const uniqueKeys = [...new Set(formData.keys());  
  const jsonData = {};
  uniqueKeys.forEach((value, key) => {
    jsonData[value] = (formData.getAll(value).length > 1) ? formData.getAll(value) : formData.get(value);
  });
  const jsonStr = JSON.stringify(jsonData);
  alert(jsonStr);
}

<form>
  <input type="text" name="name" value="John"></br>
  <select name="fruits" id="fruits" multiple>
    <option value="apple" selected>Apple</option>
    <option value="banana" selected>Banana</option>
  </select>
  <input type="button" onclick="convertFormToJson()" value="Convert to JSON">
</form>

Below is a custom function that can transform the data from a FormData object into a plain JavaScript object, which can then be converted to JSON.

function convertFormDataToObject(formData) {
    let object = {}

    const debug = (message) => {
        //console.log(message)
    }

    /**
     * Function to parse FormData key xxx`[x][x][x]` fields into array
     */
    const parseKey = (key) => {
        const subKeyIdx = key.indexOf('[');

        if (subKeyIdx !== -1) {
            const keys = [key.substring(0, subKeyIdx)]
            key = key.substring(subKeyIdx)

            for (const match of key.matchAll(/\[(?<key>.*?)]/gm)) {
                keys.push(match.groups.key)
            }
            return keys
        } else {
            return [key]
        }
    }

    /**
     * Recursive function to iterate over keys and assign key/values to object
     */
    const assign = (keys, value, object) => {
        const key = keys.shift()
        debug(key)
        debug(keys)

        // Check if it's the last key in the iterations
        if (key === '' || key === undefined) {
            return object.push(value)
        }

        if (Reflect.has(object, key)) {
            debug('hasKey ' + key)
            // If key has been found but final pass, convert the value to an array
            if (keys.length === 0) {
                if (!Array.isArray(object[key])) {
                    debug('isArray ' + object[key])
                    object[key] = [object[key], value]
                    return
                }
            }
            // Recurse again with found object
            return assign(keys, value, object[key])
        }

        // Create empty object for key, if next key is '', do array instead, otherwise set value
        if (keys.length >= 1) {
            debug(`undefined '${key}' key: remaining ${keys.length}`)
            object[key] = keys[0] === '' ? [] : {}
            return assign(keys, value, object[key])
        } else {
            debug("set value: " + value)
            object[key] = value
        }
    }

    for (const pair of formData.entries()) {
        assign(parseKey(pair[0]), pair[1], object)
    }

    return object
}

var formData = new FormData(document.querySelector('form'))

transformedObject = convertFormDataToObject(formData)

console.log(transformedObject)

<form id="form">
<input type="text" name="test" value="BBBB">
<input type="text" name="testX" value="WEE">
<input type="text" name="testX" value="FFF">
<input type="text" name="testX[]" value="1">
<input type="text" name="test1[]" value="2">
<input type="text" name="test1[]" value="3">
<input type="text" name="test1[]" value="4">
<input type="text" name="test1[]" value="5">
<input type="text" name="test2[a]" value="5">
<input type="text" name="test2[a]" value="77">
<input type="text" name="test3[a]" value="67">
<input type="text" name="test3[1][]" value="22">
<input type="text" name="test3[1][]" value="33">
<input type="text" name="test3[1][]" value="44">
<input type="text" name="test4[xAx][1]" value="3">
<input type="text" name="test4[xAx][2]" value="23">
<input type="text" name="test4[xAx][3]" value="33">
</form>

One way to efficiently achieve this is by utilizing the fromPairs method from lodash library.

import {fromPairs} from 'lodash';

const dataObject = fromPairs(Array.from(formData.entries()));

If you're looking for a solution, give this a shot

convertFormToJSON($('#example_form'));

# Function to transform and serialize form data into JSON
# @param : $('#example_form');
# @return JSON Stringify
function convertFormToJSON(form) {
    let obj = {};
    let formData = form.serialize();
    let formArray = formData.split("&");

    for (inputData of formArray){
        let dataTmp = inputData.split('=');
        obj[dataTmp[0]] = dataTmp[1];
    }
    return JSON.stringify(obj);
}

UPDATE: Upon further review, it appears there is already a similar solution available.

There are two key distinctions to note:

• This implementation does not treat numeric keys as array indices; instead, they are considered object keys. While this may not align with standard behavior, I have not encountered a need for this in my own projects but will consider revising it.
• Unlike some other functions, this is not designed with recursion. However, whether this factor is advantageous or disadvantageous depends on the specific use case.

Efficiency concerns aside, this method offers support for unlimited nesting and handles duplicate keys within arrays. It should be noted that it does not cater to file conversion scenarios as that was not a requirement during development.

For a practical demonstration, refer to this JSFiddle example showcasing the functionality of this function.

An ideal scenario for utilizing this function (as per my own experience) is to effortlessly convert an HTML form element into a FormData object and then further transform it into JSON format for transmission purposes.

/**
 * @param {FormData} formData
 * @return {Object}
 */
function formDataToObject(formData) {
    const object = {};
    for (let pair of formData.entries()) {
        const key = pair[0];
        const value = pair[1];
        const isArray = key.endsWith('[]');
        const name = key.substring(0, key.length - (2 * isArray));
        const path = name.replaceAll(']', '');
        const pathParts = path.split('[');
        const partialsCount = pathParts.length;
        let iterationObject = object;
        for (let i = 0; i < partialsCount; i++) {
            let part = pathParts[i];
            let iterationObjectElement = iterationObject[part];
            if (i !== partialsCount - 1) {
                if (!iterationObject.hasOwnProperty(part) || typeof iterationObjectElement !== "object") {
                    iterationObject[part] = {};
                }
                iterationObject = iterationObject[part];
            } else {
                if (isArray) {
                    if (!iterationObject.hasOwnProperty(part)) {
                        iterationObject[part] = [value];
                    } else {
                        iterationObjectElement.push(value);
                    }
                } else {
                    iterationObject[part] = value;
                }
            }
        }
    }

    return object;
}

Success story!

                let form = document.getElementById("form");
                const formData = new FormData(form),
                object = {};
                for (const entry of formData.entries()){
                    object[entry[0]] = entry[1];
                }
                console.log(object);

Utilizing the toJSON method as explained in JSON.stringify()

If an object has a toJSON() function, it determines how the data will be serialized.

Here is a clever trick.

var fd = new FormData(document.forms[0]);

fd.toJSON = function() {
  const o = {};
  this.forEach((v, k) => {
    v = this.getAll(k);
    o[k] = v.length == 1 ? v[0] : (v.length >= 1 ? v : null);
  });
  return o;
};

document.write(`<pre>${JSON.stringify(fd)}</pre>`)

<form action="#">
  <input name="name" value="Robinson" />
  <input name="items" value="Vin" />
  <input name="items" value="Fromage" />
  <select name="animals" multiple id="animals">
    <option value="tiger" selected>Tigre</option>
    <option value="turtle" selected>Tortue</option>
    <option value="monkey">Singe</option>
  </select>
</form>

When working with multiselects such as checkboxes, I found this solution very effective:

JSON.stringify(Array.from((new FormData(document.querySelector('form'))).entries()).reduce((mapping = {}, [key, value]) => {
    return {
        ...mapping,
        [key]: mapping[key] ? [...mapping[key], value] : value,
    };
}, {}));

This code snippet resolved my problem pertaining to an object.

function convertToJsonObject(formData) {
    for (const key in formData) {
        if (formData[key].startsWith('{') || formData[key].startsWith('[')) {
            try {
                formData[key] = JSON.parse(formData[key]);
                console.log("Key: ", key, " Value: ", formData[key]);
            } catch (error) {
                console.log("Error occurred with key: ", key);
            }
        }
    }
    console.log("Converted object: ", formData)
}

No information was available regarding TypeScript. Additionally, this particular query has been identified as a duplicate and subsequently closed.

To address this issue, I have devised a solution utilizing the zod schema.

const createJSONFromFormData = (data: FormData, zodSchema: z.AnyZodObject) => {
  const keys = Object.keys(zodSchema.shape) as unknown as Array<keyof z.infer<typeof zodSchema>>;
  const arrayKeys = keys.filter(key => zodSchema.shape[key] instanceof z.ZodArray);

  const values = Object.fromEntries(
    Array.from(data.keys()).map(key => [key, arrayKeys.includes(key) ? data.getAll(key) : data.get(key)]),
  );

  console.debug("Debug values createJSONFromFormData", JSON.stringify(values));

  return values;
};

The concept behind this approach involves leveraging the schema.shape feature from zod to determine if certain attributes are designated as arrays. Consequently, it utilizes data.getAll instead of data.get when handling such cases.

In my scenario, the FormData was structured as data, Firebase required an object but the data contained not just the object but also other elements. To resolve this issue, I accessed the value within the data by using data.value and it successfully resolved the problem!

I apologize for my tardiness in joining the discussion. Nonetheless, I have devised a straightforward approach to verify if the input type is "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" && $('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 trust that this method will be beneficial to someone else.

This solution worked perfectly for me! 😊 Click here to view the detailed code.

let convertFormToJson = function(){
    let formData = new FormData($("form#formData")[0]);
    //console.log(formData);
    let jsonData = Object.fromEntries(formData.entries());
    //console.log(jsonData);
    $("#jsonData").html(JSON.stringify(jsonData));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div class="">
        <form action="#" method="post" id="formData">
            <input type="text" name="fName" id="fName" value="Mad"><br>
            <input type="text" name="lName" id="lName" value="Coder"><br>
            <input type="button" onclick="convertFormToJson()" value="Convert Now">
        </form>
    </div>
    <div id="jsonData">
    </div>
</body>
</html>

Simply retrieve the json string like this:

var jsonStr =  JSON.stringify($('#formId').serializeObject());

If you need a JSON Object instead:

You can achieve that by parsing the JSON string like so:
var jsonObj =  JSON.parse(JSON.stringify($('#formId').serializeObject()));

Although it may be past the expected time, I have the answer ready:

Create a new URLSearchParams object by passing in the result of extracting form data from the formElement using FormData and then convert it to a string with toString().

This processed data can now serve as the body for transmission. Unfortunately, it does not conform to JSON format.