Convert form data to JavaScript object with jQuery
serializeArray already does exactly that. You just need to massage the data into your required format:
function objectifyForm(formArray) {
//serialize data function
var returnArray = {};
for (var i = 0; i < formArray.length; i++){
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
Watch out for hidden fields which have the same name as real inputs as they will get overwritten.
Convert form data to JavaScript object with jQuery
serializeArray already does exactly that. You just need to massage the data into your required format:
function objectifyForm(formArray) {
//serialize data function
var returnArray = {};
for (var i = 0; i < formArray.length; i++){
returnArray[formArray[i]['name']] = formArray[i]['value'];
}
return returnArray;
}
Watch out for hidden fields which have the same name as real inputs as they will get overwritten.
Converting form data to JSON
I've never used jquery, nevertheless googling and with personal knowledge i came up with this.
$(function () {
$('#frmSearch').submit(function (event) {
event.preventDefault();
object= {}
formData = new FormData(event.target);
formData.forEach((value, key) => object[key] = value);
alert('got here');
var txt = JSON.stringify(object);
alert(txt)
})
});
I hope i have been able to help you! Regards.
Convert form data to json before sending with ajax
The following is a Javascript Object. It is not JSON. To convert it to JSON, you can use JSON.stringify(object)
function.
{comment: "This is a comment", country: "us"}
Here is an example how to convert a JavaScript object to JSON.
let jsObject = {comment: "This is a comment", country: "us"};
document.write(JSON.stringify(jsObject));
How to convert FormData (HTML5 object) to JSON
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) => 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) => {
// 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("POST", "http://example.com/submitform.php");
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.
Convert form data to JSON object
I added above form in JSFiddle and it displays JSON data as output.
Working JSFiddle
$(function() {
$('form').submit(function() {
$('#result').text(JSON.stringify($('form').serializeObject()));
return false;
});
});
Convert formData with nested keys to JS Object
You could use something like lodash's _.set
function, or else an implementation of the same feature in vanilla JavaScript, which I will use in below snippet:
// This function is taken from https://stackoverflow.com/a/54733755/5459839
function deepSet(obj, path, value) {
if (Object(obj) !== obj) return obj; // When obj is not an object
// If not yet an array, get the keys from the string-path
if (!Array.isArray(path)) path = path.toString().match(/[^.[\]]+/g) || [];
path.slice(0,-1).reduce((a, c, i) => // Iterate all of them except the last one
Object(a[c]) === a[c] // Does the key exist and is its value an object?
// Yes: then follow that path
? a[c]
// No: create the key. Is the next key a potential array-index?
: a[c] = Math.abs(path[i+1])>>0 === +path[i+1]
? [] // Yes: assign a new array object
: {}, // No: assign a new plain object
obj)[path[path.length-1]] = value; // Finally assign the value to the last key
return obj; // Return the top-level object to allow chaining
}
// Use it for formData:
function formDataObject(form) {
const formData = new FormData(form);
const root = {};
for (const [path, value] of formData) {
deepSet(root, path, value);
}
return root;
}
// Example run
const result = formDataObject(document.forms[0]);
console.log(result);
<form>
<input name="item[0][id]" value="0121"/>
<input name="item[0][name]" value="Birmingham"/>
<input name="item[1][id]" value="01675"/>
<input name="item[1][name]" value="Warwickshire"/>
</form>
Related Topics
Is There a JavaScript/Jquery Dom Change Listener
Simplest Code For Array Intersection in JavaScript
Does JavaScript Pass by Reference
Settimeout in For-Loop Does Not Print Consecutive Values
Format Number to Always Show 2 Decimal Places
Remove Accents/Diacritics in a String in JavaScript
How to Get a Subset of a JavaScript Object'S Properties
Large Numbers Erroneously Rounded in JavaScript
How to Get Hex Color Value Rather Than Rgb Value
How to Check That a Number Is Float or Integer
What's the Meaning of "=≫" (An Arrow Formed from Equals & Greater Than) in JavaScript
How to Debug My JavaScript Code
What Is the Purpose of a Self Executing Function in JavaScript
Looping Through Array and Removing Items, Without Breaking For Loop
Escape String For Use in JavaScript Regex
Get JavaScript Object from Array of Objects by Value of Property
How to Get All Properties Values of a JavaScript Object (Without Knowing the Keys)