Best practice when changing PHP Data to JS Data via AJAX (especially arrays)

Question

(Secondary title): ajax array recieved as json encoded PHP array not behaving as javascript array

For some reason, my PHP array gets sent over to JavaScript just fine, but when I try to access an individual key of the array, it doesn't return anything, or it returns some other value which doesn't correspond. I am of course using json_encode() in the corresponding PHP file (echoClientData.php):

$id = $_GET['selected_id'];
    $id = str_replace("clientSel","",$id);
    $getclientinfo = "SELECT * FROM `clients` WHERE `ClientID` = $id";

    if ($result = $Database->query($getclientinfo))
    {
        $row = $result->fetch_row();
        $output = $row;
    }
echo json_encode($output);

This code works fine:

            $.ajax(
            {
                url: "echoClientData.php?selected_id=" + HTMLid,
                type: 'GET',
                success: function(data)
                {
                    test = data;
                    $('#client-detail-box').html(test);
                }
            });

And returns an array into the #client-detail-box div, e.g.

["1566","","Adrian","Tiggert","","","","","","","","","","","","0000-00-00","0000-00-00","0.00","","0","","","102","Dimitri Papazov","2006-02-24","102","Dimitri Papazov","2006-02-24","1","0","0"]

However, when I do

            $.ajax(
            {
                url: "echoClientData.php?selected_id=" + HTMLid,
                type: 'GET',
                success: function(data)
                {
                    test = data[3]; // should be "Tiggert"
                    $('#client-detail-box').html(test);
                }
            });
        }

It returns

5

Answer 1

You may need to do one of two things when returning JSON from PHP.

Either set your content type in PHP before echoing your output so that jQuery automatically parses it to a javascript object or array:

header('Content-type: application/json');

or specify that jQuery should treat the returned data as json:

$.ajax(
{
    url: "echoClientData.php?selected_id=" + HTMLid,
    type: 'GET',
    dataType: 'json',
    success: function(data)
    {
        var test = data[3]; // should be "Tiggert"
        $('#client-detail-box').html(test);
    }
});

Be aware, that in your current PHP script, in the event that your query fails, you will be json_encodeing an undefined variable.

Also, your PHP code is entirely open to SQL injection. Make sure you sanitize your $id, either by casting it to (int) or by escaping it before sending it through in your query.

Answer 2

Have you tried using JSON.parse on the value you are getting back from PHP?

e.g.

$.ajax(
        {
            url: "echoClientData.php?selected_id=" + HTMLid,
            type: 'GET',
            success: function(data)
            {
                test = JSON.parse(data); // should be "Tiggert"
                $('#client-detail-box').html(test[3]);
            }
        });

That seems like it would be a fix.