Pass multi-dimensional array in ajax request with jQuery


I have a bunch of javascript objects flying around page that interacts with Google Maps, and I wanted to get the data out of some of the objects to pass via a jQery AJAX $.post call to a PHP script. jQuery seems to have everything, so I was surprised there wasn’t any functionality built in to do this (at least as far as I am aware of). I found JSON stringify, which may come in very handy in the future, but seemed like overkill for this particular instance, as I needed a very limited set of data. Below is the code I came up with. My object lineM has an array of Line objects (lineM.lines), and I added a method getWaypoints to the Line object prototype (this method returns a regular javascript array). Then it’s just a matter of creating an object literal, and adding properties with “[]” appended to the property name.

var params = {};
for(var i = 0; i < lineM.lines.length;i++) {
params['line'+i+'[]']=lineM.lines[i].getWaypoints();
}
$.post('/test.php',params,function(data) {
$("#ieTest").text(data);
});

When I spit out the results in PHP, I get :

Array ( [line0] => Array ( [0] => 47.399458084,-121.393484585 [1] => 47.405251153,-121.395479813 [2] => 47.412148202,-121.397021664 [3] => 47.419077186,-121.395984907 [4] => 47.422244288,-121.387493955 [5] => 47.427556822,-121.382973259 [6] => 47.431650627,-121.383301159 [7] => 47.433441086,-121.382011855 [8] => 47.432344733,-121.381145837 [9] => 47.431196412,-121.37981873 ) [line1] => Array ( [0] => 47.457933301545786,-121.42310857772827 [1] => 47.46124106812506,-121.41435384750366 [2] => 47.46318500928391,-121.40516996383667 [3] => 47.45874575472201,-121.40710115432739 [4] => 47.458716738753324,-121.41165018081665 ) [line2] => Array ( [0] => 47.45471721756243,-121.42242193222046 [1] => 47.45404979509893,-121.41409635543823 [2] => 47.4578510880274,-121.41624212265015 [3] => 47.45634221074817,-121.40671491622925 [4] => 47.459766139142666,-121.40469789505005 ) )

3 Responses to “Pass multi-dimensional array in ajax request with jQuery”

  1. Patryk Januszewski Says:

    Thanks for pointing me in the right direction! I’ve been having trouble passing a simple array through prototype’s Ajax.Request or Updater calls.
    I’d constantly come up with php receiving the value as only the last element, or an [object Object] type.
    My solution for it was slightly different from yours, but pretty much the same thing:

    var something = [];
    something[0] = “bimmer”;
    something[1] = “empire”;
    Ajax.Request(’ajax/process.php’, { method: ‘post’, parameters: { ’something[]’:something } } );

    PHP ends up with an associative array of values -which is exactly what I needed/preferred. Thanks!

  2. johno Says:

    I could nopt get this to work without getting a error:

    On the php side:

    echo $_POST[’something[]’];// retrurns false;

  3. Tim White Says:

    Here’s a how-to on the methods I use to get multidimensional data passed to PHP with AJAX(including JSON stringify functions):

    http://www.zulius.com/how-to/sen-multidimensional-arrays-php-with-jquery-ajax/

Leave a Reply