Serializing an array in jQuery

Question

How to prepare an array of element for $.ajax submit?

Here images return ["val1","val2"], but after I use $.param(images) I get the following:

undefined=undefined&undefined=undefined

Here is my code:

$('#rem_images').click(function() {
    var images = new Array();
    $('.images_set_image input:checked').each(function(i) {
        images[i] = $(this).val();
    });
    alert($.param(images));

    return false;
}

Generally the idea is to check the images to delete on the page, then on a button click loop trough all images checked and serialize an array for submit over AJAX to the PHP script.

Matt Ball · Accepted Answer · 2010-11-21T18:39:04.280

You're not passing an array in proper format to $.param. From the jQuery.param docs:

If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray().

The array should be an array of objects consisting of name/value pairs. You see undefined=undefined&undefined=undefined because "val1".name, "val1".value, "val2".name, and "val2".value, are all undefined. It should look something like this:

[{name: 'name1', value: 'val1'}, {name: 'name2', value: 'val2'}]

So you can construct the array like this (assuming your checkboxes have a name attribute):

$('#rem_images').click(function(){
    var images = [];
    $('.images_set_image input:checked').each(function(){
        var $this = $(this);
        images.push({name: $this.attr('name'), value: $this.val()});
    });
    alert($.param(images));
    return false;
});

Even slicker, though, is to use .map() (because functional programming is good stuff):

$('#rem_images').click(function(){
    var images = $('.images_set_image input:checked').map(function(){
        var $this = $(this);
        return {name: $this.attr('name'), value: $this.val()};
    }).get();
    alert($.param(images));
    return false;
});

This matter was difficult for me to understand, but with your answer and some investigation I've managed to do what I wanted, THANK YOU =) — Metafaniel, Jun 15 '12 at 19:58

score 8 · Answer 2 · answered Nov 21 '10 at 18:31

See the docs for $.param:

If the object passed is in an Array, it must be an array of objects in the format returned by .serializeArray()

[{name:"first",value:"Rick"},
{name:"last",value:"Astley"},
{name:"job",value:"Rock Star"}]

That means you need to generate your array in the same way:

$('.images_set_image input:checked').each(function(i){
    images.push({ name: i, value: $(this).val() });
});

score 1 · Answer 3 · answered May 25 '17 at 09:56

I find a great function to do that from another question https://stackoverflow.com/a/31751351/4110122

This function return array with key value pairs

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            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;
};

To use this just call:

var Form_Data = $('form').serializeObject();
console.log(Form_Data);

Serializing an array in jQuery

3 Answers3

Linked