How to serialize a JavaScript associative array?

arrays, forms, javascript, jquery

Solution

In general, don't use JS arrays for "associative arrays". Use plain objects:

var array_products = {};

That is why `$.each` does not work: jQuery recognizes that you pass an array and is only iterating over numerical properties. All others will be ignored.

An array is supposed to have only entries with numerical keys. You can assign string keys, but a lot of functions will not take them into account.

Better:

As you use jQuery, you can use `jQuery.param` [docs] for serialization. You just have to construct the proper input array:

var array_products = []; // now we need an array again
$( '.check_product:checked' ).each(function( i, obj ) {
    // index and value
    var num = $(obj).next().val();
    var label = $(obj).next().next().attr( 'data-label' );
    // build array
    if( ( num > 0 ) && ( typeof num !== undefined ) ) {
        array_products.push({name: label, value: num});
    }      
});

var serialized_products = $.param(array_products);

No need to implement your own URI encoding function.

DEMO

Best:

If you give the input fields a proper `name`:

<input name="sky_blue" class="percent_product" type="text" value="20" />

you can even make use of `.serialize()` [docs] and greatly reduce the amount of code (I use the next adjacent selector [docs]):

var serialized_products = $('.check_product:checked + input').serialize();

(it will include `0` values though).

DEMO

Problem

I need to serialize an associative JavaScript array. It's a simple form of products and a numeric values, but just after building the array seems empty. The code is here: http://jsbin.com/usupi6/4/edit

Original source