jquery.serializeToJSON
Adds the method .serializeToJSON()
to jQuery that Serialize an HTML form (familiar with ASP MVC) to a JavaScript object, supporting nested attributes and arrays.
Install
Install with bower bower install jquery.serializeToJSON
, or npm npm install jquery-serializetojson'
, or just download the jquery.serializetojson.js script.
And make sure it is included after jQuery, for example:
Usage Example
HTML form (input, textarea and select tags supported):
<!-- Example of form similar to Razor (ASP MVC) --> Name e-mail Payment Select payment... Credit Card Cash Credit Card Company Company A Company B Company C New Customer? Yes No Marketing: You agree to receive e-mail partner? You agree to receive SMS partner? Product ID Name Quantity Cost
JavaScript:
var obj = ; // obj => Customer: FullName: "Raphael Nunes" Email: "myemail@gmail.com" Payment: "1" CreditCardCompany: "Company A" "Company C" IsNewCustomer: true ReceiveEmailPartner: false ReceiveSMSPartner: false Product: 0: ID: 54457 Name: "Smartphone" Quantity: 5 Cost: 105499 1: ID: 97518 Name: "iPad" Quantity: 3 Cost: 211999 var objNotAssociativeArrays = ;// objNotAssociativeArrays => Customer: "FullName": "Raphael Nunes" "Email": "myemail@gmail.com" Payment: "1" CreditCardCompany: "Company A" "Company C" IsNewCustomer: true ReceiveEmailPartner: false ReceiveSMSPartner: false Product: ID: "54457" Name: "Smartphone" Quantity: "5" Cost: "1,054.99" ID: "97518" Name: "iPad" Quantity: "3" Cost: "2,119.99"
The function serializeToJSON
return a JavaScript object, not a JSON string.
If you want a chain a JSON string then use JSON.stringify
To support old browsers, just include the json2.js polyfill (as described on stackoverfow).
var obj = ; var jsonString = JSON;
Note that .serializeToJSON ()
uses the return of jQuery's method .serializeArray () to create the serialized object.
So if the return is not desired, first check that that was returned by the .serializeArray () method.
Options
To change the default options, simply enter the desired options via parameter of the method .serializeToJSON ()
.
To change the default behavior you use the following options:
-
associativeArrays: true, by default, the method does not serialize using the
Array
butAssociative Arrays
. -
parseBooleans: true, automatically detect and convert strings
"true"
and"false"
to booleanstrue / false
. -
parseFloat.condition: undefined, the value can be a
string
orfunction
string
: filter used in the function jQuery().is('condition')
to detect and convert into float / number. Example: ".number"
or "[mask='money']"
.
function
: the return of function sets when the convert occur. example:
{ var v = i; return !; // In this case, conversion will always occur when possible}
-
parseFloat.nanToZero: true, automatically detect
NaN
value and changes the value to zero. -
parseFloat.getInputValue:
function(){}
, By default, returns the input value without commas, not an error occurs in conversion. if your location uses comma for decimal separation, for example in German or Brazil, you can change to:
{ return i; }
Defaults
All options defaults are defined in $.serializeToJSON.defaultOptions
. You can just modify it to avoid setting the option on every call to serializeToJSON
.
For example:
$fnserializeToJSONdefaultsparseBooleans = false; // not parse booleans by default$fnserializeToJSONdefaultsassociativeArrays = false; // not use associative array by default ; // No options => then use $.fn.serializeToJSON.defaults
Contributions
Contributions are always welcome.
Author
Written and maintained by Raphael Nunes