How to create a two-dimensional array in PHP and iterate through it with Javascript

Question

Im currently trying to do the follow:

1. Request a PHP file from my image.js code
2. In the request call - query out data from my mysql database and save it in a PHP array
3. Return the array to image.js as a JSON object.

I got nr 1 + nr 3 covered - what im strugling with is how to save my database attributes correctly into the PHP array and afterwards iterate through each record from the json callback .

Database attribute example:

player_id (unique key) || player_name || player_country || player_image || player_league ||

Question/Challenge 1: Saving the Array (this is what im not sure of)

while ($row = mysql_fetch_assoc($res))
{
    $myCallbackArray[] = array($row['player_id'], $row['player_name'], $row['player_country'], $row['player_image']);
}

- The following array, will just be one "flat-array" with no dimension based on saving all corresponding attributes under seperate player_id 's?

To give some some context - and assuming the array is fine, we then in a 'next-step' send it back to JS

$callback = $myCallbackArray;
echo json_encode(array('returned_val' => $callback));

Question/Challenge 2 : Accessing the array values in JS (this is what im not sure of)

      //Save the data
    var url = "request.php"; //

      var request = $.ajax({
             type: "POST",
             url: url,
             dataType: 'json',
             data: { user_id: id},

             success: function(data)
             {

//HERE WE HANDLE THE RETURNED ARRAY
if(data.returned_val) {

                  for( var i = 0; i < data.returned_val.length; i++ ){
//HERE I WOULD LIKE TO MAKE THE DIFFERENT ATTRIBUTES ACCESSABLE
                  } 
             },
             error:function() {
                //FAILURE
            }   

});
return false;

-So in this part im not sure how to actually handle the multi-dimensional array from PHP. I assume we need to save it out in a Javascript array and then we can probably iterate / access each value through an foreach loop - but yet again,- how im not entirely sure?

Answer 1

I'll suggest to use json_encode:

$myCallbackArray []= (object) array(
    "player_id" => '...',
    "player_name" => '...',
    "player_country" => '...',
    "player_image" => '...',
    "player_league" => '...'
);

$json = json_encode($myCallbackArray);

$json is actually the following:

[{"player_id":"...","player_name":"...","player_country":"...","player_image":"...","player_league":"..."}]

which is valid JSON and you could easily use it in javascript.

Answer 2

I think your accessing the data wrong in your success function, the data comes back as an array. Here is an example:

var request = $.ajax({
    type: "POST",
    url: url,
    dataType: 'json',
    data: {user_id: id},
    success: function(data){

        var myval = data["returned_val"];

        alert(myval);

    },
    error:function() {
        //FAILURE
    }
});