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 : stackoverflow.com/questions/191881/… — sdespont
– sdespont, Commented Dec 19, 2012 at 20:47
No, jQuery serializes objects automatically, expecting them to be a one-level-deep map of url parameter key-value pairs. — Bergi
– Bergi, Commented Dec 19, 2012 at 20:53
possible duplicate of jQuery ajax, how to send JSON in stead of QueryString — Bergi
– Bergi, Commented Dec 19, 2012 at 20:55
@Bergi I wonder where did you find word "JSON" in this question? — Sergii Stotskyi
– Sergii Stotskyi, Commented Dec 19, 2012 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
– Sergii Stotskyi, Commented Dec 19, 2012 at 21:09

Sergii Stotskyi · Accepted Answer · 2012-12-19 21:04:26Z

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

Sushanth -- · Accepted Answer · 2012-12-19 20:52:10Z

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, 2012 at 20:52

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

5 Comments

Sergii Stotskyi Over a year ago

JSON.stringify... WTF? He sends data using a normal REST POST request. Why should he encode his data with JSON?

Beetroot-Beetroot Over a year ago

By the same token, why should he not?

Sergii Stotskyi Over a year ago

@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

Beetroot-Beetroot Over a year ago

@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?) :)

Sergii Stotskyi Over a year ago

@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.

Collectives™ on Stack Overflow

jQuery AJAX, array not getting serialized

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related