Difference between serialize and serializeObject jquery

Question

I search a lot but didn't find perfect difference between serialize and serializeObject method of jquery.

Please help me to understand this.

jQuery has no method named `serializeObject` in its core. If you're seeing the use of that, it's probably in a plugin and probably does the same thing as `serialize` — SpYk3HH, Jul 05 '13 at 12:16
As far as I'm aware `serializeObject` is not a core jquery function so first you have to tell us where did you get that plugin, but in any case, don't think it's worth the comparison. — Claudio Redi, Jul 05 '13 at 12:16
More info may be found [***here***](http://stackoverflow.com/questions/8900587/jquery-serializeobject-is-not-a-function-only-in-firefox) — SpYk3HH, Jul 05 '13 at 12:18
@ClaudioRedi In my project I use serializeObject method to get form data and send through ajax call. So I want to know what it exactly does and I want to push additional data to it. — commit, Jul 05 '13 at 12:18

score 40 · Accepted Answer · edited May 23 '17 at 12:02

As you can see here, serializeObject is not a native jQuery Method and thus only exist if you or a previous programmer of the site inserted it. As is mentioned in an Q&A found here, this function was probably found when someone working on your site "searched a way to serialize a form" and found the following extension:

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

Look for serializeObject somewhere in your JS, but note, it's probably not needed as it ~~appears to do the same thing as $.fn.serialize~~.

Upon further review, I found it's not the exact same. serializeObject method found at other Q&A will serialize a form's value's as an Object, while serialize encodes the values as a string for submission.

Please take note, if you want something like serailizeObject that is native to the jQuery Core, then please see serializeArray.

The result will be slightly different in that serializeArray will make an array of objects of your form values. each Object having { name: "", value: "" }

EXAMPLE

^{Please see Developer Tools Console in example.}

You should use `if (o.hasOwnProperty(this.name))` instead of `if (o[this.name])`. If first input out of group with the same `name` property is empty, second variant will be `false`. — Maxim Pechenin, Dec 05 '13 at 12:56
@MaximPechenin : If you read the question and the answer through you'll find I didn't write that method. I simply reference it as it is the most popular form I could find online. That point was to help the OP identify where a method may be that was causing interference. — SpYk3HH, Dec 05 '13 at 16:53

score 5 · Answer 2 · answered Aug 03 '15 at 11:08

I have done some digging here on stackoverflow on serializing form to json object and I ended up finding this method

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

yet it doesn't fit on what I was working on. So I created my own plugin. If your interested you might what to check this out https://github.com/citnvillareal/serializeObject

score 3 · Answer 3 · answered Jul 05 '13 at 12:18

3

$.serializeObject is a variant of existing $.serialize method which, instead of encoding form elements to string, converts form elements to a valid JSON object which can be used in your JavaScript application.

answered Jul 05 '13 at 12:18

Amit

15,217
8
46
68

score 2 · Answer 4 · answered Mar 09 '16 at 07:35

2

I think this is easy way !TODO--

$.fn.serializeObject = function () {
        var o = {};
        this.find("[name]").each(function () {
             o[this.name] = this.value;
        });
        return o;
    };

answered Mar 09 '16 at 07:35

Rajib Chy

800
10
22

score 0 · Answer 5 · answered Feb 26 '21 at 08:03

Vanilla JS for .serialize(), .serializeArray() and .serializeObject() for those coming here for that.

let form = document.querySelector("form");
let params = new URLSearchParams(new FormData(form)).toString(); //query string, e.g. value=name&username=john
//object
let obj = {};
params.split("&").map(function (q){let a = decodeURI(q).split("=");obj[a[0]] = a[1]});

//array
let arr = params.split("&").map(function (q){let a = decodeURI(q).split("="); return {name:a[0],value:a[1]}});

An object will look like:

{
  name: "value",
  username: "john"
}

and the array would be

[{
   name: "name",
   value: "value"
}, {
   name: "username",
   value: "john"
}]

Personally, I much prefer using objects as it lets you easily modify the data and it's ready to be sent to a server. On the other hand, if you send an array to the server, you will need additional server-side code to convert that into an object, or to find the right values.

Difference between serialize and serializeObject jquery

5 Answers5

EXAMPLE

Linked