How to send an JavaScript array to PHP via jQuery.ajax?

Question

I'm trying to send a JavaScript array to a PHP page via jQuery.ajax, but the array is sent only with blank values.

If I open the F12 Console on Chrome and check for the JS object, it's there. All filled up. But when I log the PHP variable using the ChromePhp tool, it shows only the blank values (also, if I iterate over the php-array, echoing its values, I get all blanks).

I'm deeply confused here.

Here goes my sample code:

<?php 
include 'ChromePhp.php';
if (isset($_GET['newUsers'])) {
    $newUsers = $_GET['newUsers'];
    ChromePhp::log($newUsers);
} else { ?>

<html>
<body>

    <script src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        var newUsers = [];

        newUser = [];
        newUser['nome'] = 'alvaro';
        newUser['idade'] = '34';
        newUsers.push(newUser);

        newUser1 = [];
        newUser1['nome'] = 'bia';
        newUser1['idade'] = '7';
        newUsers.push(newUser1);

        newUser2 = [];
        newUser2['nome'] = 'alice';
        newUser2['idade'] = '2';
        newUsers.push(newUser2);

        $.ajax({
            url: "testcookie.php",
            type: "GET",
            data: {
                'newUsers[]': newUsers
            }
        });

    </script>
</body>
</html>
<?php } ?>

Updated Based on the first comments. Now I get to pass the object, but don't know how to read its properties. Already tried $user['nome'] with no result.

<?php 
include 'ChromePhp.php';

if (isset($_POST['newUsers'])) {

    $newUsers = $_POST['newUsers'];

    foreach ($newUsers as $user) {
        # code...
        # HOW DO I READ THE nome AND idade VALUES HERE?
    }

} else { ?>

<html>
<body>

    <script src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        //var newUsersObj = {};
        var newUsers = [];

        newUser = {};
        newUser['nome'] = 'alvaro';
        newUser['idade'] = '34';
        newUsers.push(newUser);

        newUser1 = {};
        newUser1['nome'] = 'bia';
        newUser1['idade'] = '7';
        newUsers.push(newUser1);

        newUser2 = {};
        newUser2['nome'] = 'alice';
        newUser2['idade'] = '2';
        newUsers.push(newUser2);

        $.ajax({
            url: "testcookie.php",
            type: "POST",
            data: {
                'newUsers[]': newUsers
            },
            success: function () {

            },
            error: function () {

            }
        });

    </script>
</body>
</html>
<?php } ?>

All your `newUser` objects should be initialised with `{}` as they are **not** arrays — Phil, Nov 29 '13 at 02:29
It worked, @Phil ! I just have to figure it ou how to read the JavaScript object on the PHP. :) — Alvaro Cavalcanti, Nov 29 '13 at 02:45
Also, it is better to use POST if you are sending data TO the server (instead of requesting it). [REST](http://es.wikipedia.org/wiki/Representational_State_Transfer) — fos.alex, Nov 29 '13 at 03:00

score 4 · Answer 1 · answered Nov 29 '13 at 02:53

Just pass the array or object, jQuery will convert the array or object to the proper params automatically, like a=[1,2] -> a[]=1&a[]=2

 data: {
    'newUsers': newUsers
 }

The internal function, which make this happen, is http://api.jquery.com/jQuery.param/

score 4 · Accepted Answer · answered Nov 29 '13 at 03:23

Got it!

To properly access the JavaScrtipt objects in PHP I need to JSON.stringify them when pushing on the array. Then, on PHP, json_decode them to a PHP object, and access their properties with the '->' operator.

The final solution is as follows:

<?php 
include 'ChromePhp.php';

if (isset($_POST['newUsers'])) {

    $newUsers = $_POST['newUsers'];

    foreach ($newUsers as $user) {
        # code...
        $usr = json_decode($user);
        ChromePhp::log("Nome: " . $usr->nome . " - Idade: " . $usr->idade);
    }

} else { ?>

<html>
<body>

    <script src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        //var newUsersObj = {};
        var newUsers = [];

        newUser = {};
        newUser['nome'] = 'alvaro';
        newUser['idade'] = '34';
        newUsers.push(JSON.stringify(newUser));

        newUser1 = {};
        newUser1['nome'] = 'bia';
        newUser1['idade'] = '7';
        newUsers.push(JSON.stringify(newUser1));

        newUser2 = {};
        newUser2['nome'] = 'alice';
        newUser2['idade'] = '2';
        newUsers.push(JSON.stringify(newUser2));

        $.ajax({
            url: "testcookie.php",
            type: "POST",
            data: {
                'newUsers[]': newUsers
            },
            success: function () {

            },
            error: function () {

            }
        });

    </script>
</body>
</html>
<?php } ?>

How to send an JavaScript array to PHP via jQuery.ajax?

2 Answers2

Linked