jQuery AJAX, array not getting serialized

Question

I'm trying to post a multidimensional array using jQuery. I have verified that immediately before sending the array, it contains the contents it is supposed to (by checking specific elements and alerting them).

However, when I send the request, it's sending this:

Array
(
    [undefined] => 
)

Here's the whole thing...

           var mainArray = new Array();
           $(".list").each(function(){
               var day = $(this).attr("id");
               var order = 1;
               $("#" + id + " li").each(function(){
                   var subArray = new Array();
                   var id = $(this).attr("id");
                   subArray["id"] = id;
                   subArray["order"] = order;
                   subArray["day"] = day;
                   mainArray.push(subArray);
                   order++;
               });
           });

           // This displays what I would expect
           alert(mainArray[0]['id']);
           alert(mainArray[1]['id']);
           alert(mainArray[2]['id']);
           alert(mainArray[3]['id']);

           // This doesn't work
           $.ajax({
                type: 'post',
                url: 'test2.php',
                data: mainArray,
                success: function(data) {
                    $("#test").html(data);
                }
            });

Any ideas? My understanding is that jQuery is supposed to serialize the array automatically?

Not sure that it is possible. I would use json map to do that, exemple to stringify your array : http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery — sdespont, Dec 19 '12 at 20:47
No, jQuery serializes objects automatically, expecting them to be a one-level-deep map of url parameter key-value pairs. — Bergi, Dec 19 '12 at 20:53
possible duplicate of [jQuery ajax, how to send JSON in stead of QueryString](http://stackoverflow.com/questions/12693947/jquery-ajax-how-to-send-json-in-stead-of-querystring) — Bergi, Dec 19 '12 at 20:55
@Bergi I wonder where did you find word "JSON" in this question? — Sergii Stotskyi, Dec 19 '12 at 21:06
@Bergi You are wrong, jQuery serializes objects with any-level-deep: `$.param({ items: { name: "test", children: [{ name: "child 1"}, { name: "child 2" }] }})` — Sergii Stotskyi, Dec 19 '12 at 21:09
@Serjio: Thanks for the correction, I thought it would use bracket syntax only for arrays. On JSON: the OP didn't mention it, but as he did not specify how to serialize the multidimensional array I linked to that possibility. — Bergi, Dec 19 '12 at 21:17

score 1 · Answer 1 · answered Dec 19 '12 at 20:52

1

Stringyfy the data before you send it to the server

Also it's a better practice to send the data as a Map..

Instead of this

data: mainArray,

Try

data: { 'arr': JSON.stringify(mainArray) },

answered Dec 19 '12 at 20:52

Sushanth --

55,259
9
66
105

`JSON.stringify`... WTF? He sends data using a normal `REST POST` request. Why should he encode his data with JSON? – Sergii Stotskyi Dec 19 '12 at 20:59
1

By the same token, why should he not? – Beetroot-Beetroot Dec 19 '12 at 21:48
@Beetroot-Beetroot Maybe because it's overhead, isn't it? I suppose author of this question uses PHP as a backend, so if he sends normal `HTTP POST` request all request's vars will be available over `$_POST` array, so he shouldn't parse incoming data with `json_decode`. You suggested case in which JS should convert data into JSON and then backend should decode this data. It's unnecessary work for FE and for BE. Also almost all scripting languages gives mechanism to work with HTTP requests from the box, so it's a good reason to use standard interface – Sergii Stotskyi Dec 20 '12 at 08:12
@Serjio, Regarding FE/BE load, remember the standard mechanism imposes a load too. Without running tests I couldn't say whether JSON coding imposes more or less load but would guess any difference will be trivial either way. In conclusion, "WTF" is a bit strong. How about "WBNS" (Why Be Non-Standard?) :) – Beetroot-Beetroot Dec 20 '12 at 12:55
@Beetroot-Beetroot Your are right. It seems I was a bit strict-) I'm sorry for this. But "WTF" is suitable because there is no any reminder about JSON in the question. And the issue can be resolved easier without using another communication type between FE and BE. – Sergii Stotskyi Dec 20 '12 at 13:08

Sergii Stotskyi · Accepted Answer · 2012-12-19T21:04:26.323

Your code is totally wrong!

At first, give your 2-dimensional array some name for example items (or whatever you want). Second, you can't use Array for creating hash (theoretically you can but it's bad and jQuery doesn't understand this), you have to use object literals {} instead of Array, use Array only with numeric keys (use literals [] for creating array instead of new Array). Your code:

var mainArray = [];
$(".list").each(function(){
   var day = $(this).attr("id");
   var order = 1;

   $("#" + id + " li").each(function(){
       var subArray = {};

       subArray["id"] = $(this).attr("id");
       subArray["order"] = order;
       subArray["day"] = day;

       mainArray.push(subArray);
       order++;
   });
});

$.ajax({
    type: 'post',
    url: 'test2.php',
    data: { items: mainArray },
    success: function(data) {
        $("#test").html(data);
    }
});

P.S.: you can use $.param (convert js objects into query string) to figure out your mistakes

jQuery AJAX, array not getting serialized

2 Answers2