title: Accessing array values in jQuery ajax callback function
body: <p>This is actually a short, simple question regarding getting at the values of an array echoed by a PHP script, and received/processed by Javascript. </p>
  
  <p>The beginning of the question should give enough information for someone to answer; my various failed experiments make up the rest of this lengthy question.</p>
  
  <p>An array is received through a jQuery AJAX callback, but I've been unsuccessful getting at the values.</p>
  
  <p>Here's the ajax call:</p>
  
  <pre><code>$.ajax({
      type: "POST",
      url: "ajax/ax_all_ajax_fns.php",
      data: 'request=edit_timecard_entry&amp;staff_id='+staff_id+'&amp;tid='+tid,
      success: function(data){
          alert(data);
      }
  }
  </code></pre>
  
  <p>Here's the code sent out by ax_all_ajax_fns.php:</p>
  
  <pre><code>$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;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>Array
  (
      [staff_id] =&gt; 51
      [date] =&gt; 2012-10-18
      [project_id] =&gt; 0
      [project_num =&gt; 49
      [task_desk] =&gt; This is a task
      [hours] =&gt; 3.30
  )
  </code></pre>
  
  <p>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".</p>
  
  <p>In the success function, in place of <code>alert(data);</code>, I've tried this:</p>
  
  <pre><code>var tce_staff_id = data['staff_id'];
  alert(tce_staff_id);
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>var tce_staff_id = data.staff_id;
  alert(tce_staff_id);
  </code></pre>
  
  <p>What am I missing?</p>
  
  <p>UPDATE:</p>
  
  <p>Thanks to Martin S. for information re json_encode() PHP instruction. I've modified the ajax script as follows:</p>
  
  <pre><code>echo json_encode($aCard);
  </code></pre>
  
  <p>I now get THIS result from alert(data); in the success function:</p>
  
  <pre><code>{"staff_id":"51","date":"2012-10-18","project_id":"0","project_num":"49","task_desc":"This is a task","hours":"3.30"}
  </code></pre>
  
  <p>However, the following returns "undefined":</p>
  
  <pre><code>alert(data.staff_id);
  alert(data[0].staff_id);
  var test = data.staff_id;
  alert(test);
  </code></pre>
  
  <p>Can anyone see what I'm missing? All above code comes immediately after <code>alert(data)</code> inside the success callback of the ajax function. <code>alert(data)</code> DOES work and displays the desired data, as above.</p>