How to send two-dimensional array via ajax?

Question

I've got this method for sending data to the server:

var points = [];
var coords = polyline.geometry.getCoordinates();
for (var i = 0; i < coords.length; i++)
{
    var x = (coords[i][0]).toFixed(4);
    var y = (coords[i][1]).toFixed(4);
    points[i] = [x,y];
}
$("form").on('submit',
    function(e){
        var data = $(this).serializeArray();
        console.log(points);
        data.push({name:'points[]',value:points});
        $.ajax(
            {
                url: '/admin/index/add-route',
                method: 'post',
                data: data,
                success: function(result) {
                    console.log('succcess');
                }
            }
        );
        console.log(data);
        e.preventDefault();
        return false;
    }
);

On the backend, I obtain a one-dimensional array with these values:

(var dump of $_POST['points'])
array (size=1)  0 => string '48.9225,24.6948,48.9220,24.7090' (length=31)

Answer 1

Jquery will take multi dimensional arrays directly, no need to serialize.

var data = { foo: 123, bar: 456, rows: [ { column1 : 'hello', column2 : 'hola', column3 : 'bonjour',. }, { column1 : 'goodbye', column2 : 'hasta luego', column3 : 'au revoir', }, ], test1:{ test2: { test3: 'baz' } } }; _Post Data in your PHP file would look like this

Array ( [foo] => 123 [bar] => 456 [rows] => Array ( [0] => Array ( [column1] => hello [column2] => hola [column3] => bonjour )

        [1] => Array
            (
                [column1] => goodbye
                [column2] => hasta luego
                [column3] => au revoir
            )

    )

[test1] => Array
    (
        [test2] => Array
            (
                [test3] => baz
            )

    )

)

Once you define your data multidimensional array, your Ajax could be as simple as

$.ajax({ type: 'post', cache: false, url: './ajax.php', data: data }); If your post array may have fields that you don't know about, you can access your Post array in your php file easily with

$data = file_get_contents('php://input'); $data = json_decode($data, true);

Answer 2

You don't need to use .serializeArray();

Just do the following:

var data = {points: points};

and on the PHP side:

$points = json_decode($_POST['points']);

Answer 3

To send an array to the server, use JSON.stringify(object) , resp. JSON.stringify(array) to convert an array or an object to a string. Use the same method from PHP to make an php-object (or array) from this string again: json_decode(string)

http://php.net/manual/de/function.json-decode.php

the other way round is json_encode(data) and parse it on the JS side: JSON.parse(string)

Answer 4

It's seems you're doing something fishy. When you use serializeArray(), you convert a form to an object:

.serializeArray() - Encode a set of form elements as an array of names and values.

.serializeArray() docs

---

Also check this JSFiddle with a mockup of your scenario (ajax was removed for obvious reasons).

---

Anyway, since you're already using jquery, and POST, use JSON to encode the array.

var data = $(this).serializeArray();
data.push({name:'points',value:points});
var dataJson = JSON.stringify(data);

then pass that in your ajax

On php side, you just need to parse the json

$data = json_decode($json_string);