Accessing array values in jQuery ajax callback function

Posted by gibberish on Stack Overflow See other posts from Stack Overflow or by gibberish
Published on 2012-11-19T21:31:08Z Indexed on 2012/11/19 23:01 UTC
Read the original article Hit count: 388

Filed under:

Values are received through a jQuery AJAX callback, but I've been unsuccessful getting at the values.

Here's the ajax call:

$.ajax({
    type: "POST",
    url: "ajax/ax_all_ajax_fns.php",
    data: 'request=edit_timecard_entry&staff_id='+staff_id+'&tid='+tid,
    success: function(data){
        alert(data);
    }
}

Here's the code sent out by ax_all_ajax_fns.php:

$staff_id = $_POST['staff_id'];
$t_id = $_POST['tid'];
$rCard = mysql_query("SELECT `staff_id`, `date`, `project_id`, `project_num`, `task_desc`, `hours` FROM `timecards` WHERE `t_id`='$t_id'");
$aCard = mysql_fetch_assoc($rCard);
print_r($aCard);
//  echo $aCard;

Of course, I don't want the information print_r'd, I want it echoed. The print_r was used to demonstrate that the correct data was sent out by the PHP script, and it is echoed successfully in the alert() box in the success function. So the correct data is being returned, and (if correctly formatted) it is viewable. The data returned in this way looks like this in the alert() popup:

Array
(
    [staff_id] => 51
    [date] => 2012-10-18
    [project_id] => 0
    [project_num => 49
    [task_desk] => This is a task
    [hours] => 3.30
)

But when I use echo to output the $aCard array and then try to break it down inside the success function of the ajax call, I can't figure out how to get at the values. My attempts have consistently returned values of "undefined".

In the success function, in place of alert(data);, I've tried this:

var tce_staff_id = data['staff_id'];
alert(tce_staff_id);

and this:

var tce_staff_id = data.staff_id;
alert(tce_staff_id);

What am I missing?

UPDATE:

Thanks to Martin S. for information re json_encode() PHP instruction. I've modified the ajax script as follows:

echo json_encode($aCard);

I now get THIS result from alert(data); in the success function:

{"staff_id":"51","date":"2012-10-18","project_id":"0","project_num":"49","task_desc":"This is a task","hours":"3.30"}

However, the following returns "undefined":

alert(data.staff_id);
alert(data[0].staff_id);
var test = data.staff_id;
alert(test);

Can anyone see what I'm missing? All above code comes immediately after alert(data) inside the success callback of the ajax function. alert(data) DOES work and displays the desired data, as above.

© Stack Overflow or respective owner

Related posts about jquery-ajax