Pass JS Array to server through $.ajax call

Question

Here is my piece of code :

    $('#addType').on('submit', function(e) {
        $form = $(this);
        var type = [];
        $(this).find('input[type=number]').each(function() {
            type[$(this).attr('id')] = $(this).val();
        });
        console.log(type);
        $.ajax({
            type: 'POST',
            url: '<?php echo $this->url(array(), 'addType');?>',
            data: {type: type},
            success: function() {
                $form.find('input[type=submit]').attr('disabled','disabled');
            }
        });
        e.preventDefault();
    });

As you can see, it builds an javascript array from the inputs in form#addType and send it to a server side script supposed to handle this array. My problem is that no data is passed through $.ajax({}).

UPDATE

It seems that it comes from the values of the array keys that cannot by litteral. If I put an incremented number as key, the array is successfully passed. How come?

JavaScript doesn't have associative arrays. Arrays can only have numerical indices. Also, why not just use .serializeArray()? Just pass the form as a jQuery object and you have your data ready to POST. — Jonathan
– Jonathan, Commented Mar 20, 2014 at 10:16

Roman Hocke · Accepted Answer · 2014-03-20 10:19:25Z

3

Make the type an object, not an array:

var type = { };

You created type as an array (using []). Array is an object, too, so You can add named members to it, which is what You do in Your loop:

type['my-item-id'] = xxx;

But when You add the type variable to the Ajax request, jQuery checks that the variable is an array and so it iterates through the type as trough an array, so it looks for it's "numerical-indexed" items using type.length (which is 0 as You added none):

for (var i = 0; i < type.length; i++)
    ... type[i] ...

When You create type as an Object (using {}), jQuery sees that it should iterate over type as over an object and does it so and "sees" the "named" items:

for (var i in type)
    ... type[i] ...

edited Mar 20, 2014 at 10:19

answered Mar 20, 2014 at 10:11

Roman Hocke

4,2411 gold badge22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

D4V1D Over a year ago

It works! So data passed to server with Ajax can't be an array? It has to be an object?

Jonathan Over a year ago

@Steve it can be an array or an object.

Roman Hocke Over a year ago

I tried to add the explanation in the answer. Feel free to accept it, thanks! :-)

Quentin Over a year ago

@Steve — No, arrays are fine, but arrays can't have named properties. (Well, they can, but they won't be serialised).

D4V1D Over a year ago

Many thanks for the explanations. Your answer has been accepted.

Collectives™ on Stack Overflow

Pass JS Array to server through $.ajax call

UPDATE

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related