Processing Ajax JSON Return Array

Processing Ajax JSON Return Array

I have over 50 scripts where I use an Ajax call to populate a DataTable. All work great. Now I have the need to use an Ajax call that will access a mySQL database and return information to simply display on a page via Javascript.

Here is my Ajax code...
  2. <?php
  3. $fam_ID = 1;

  5. $output = array( "sEcho" => 1, 
  6.  "iTotalRecords" => 100, 
  7.  "iTotalDisplayRecords" => 100, 
  8.  "aaData" => array()
  9.    );
  10.    
  11. try {
  12. if ( $fam_ID != 0 ) {
  13. $name_short = "SHORT NAME";;
  14. $name_long  = "LONG NAME";
  15. $submitter  = "SUBMITTER";
  16.              $photo = "PHOTO";
  17. $caption = "CAPTION";;
  18. $text = "TEXT";

  20. $output['aaData'][] = array('name_short' => $name_short,
  21.   'name_long'  => $name_long,
  22.   'submitter'  => $submitter,
  23.   'photo'    => $photo,
  24.   'caption'    => $caption,
  25.   'text'    => $text);
  26. }
  27. }
  29. // We have a problem so report it
  30. catch(PDOException $e) {
  31. $output['aaData'][] = $e->getMessage();
  32. }

  34. echo json_encode($output); // Return results as json encoded array
This code returns the following... 
  1. {"sEcho":1,"iTotalRecords":100,"iTotalDisplayRecords":100,"aaData":[{"name_short":"SHORT NAME","name_long":"LONG NAME","submitter":"SUBMITTER","photo":"PHOTO","caption":"CAPTION","text":"TEXT"}]}
I am using the following code to access the Ajax and process the return array.
  2. var request;
  3. // **************************************************************************************************** Initialize jQuery
  4. $(document).ready(function() {
  5. 'use strict';
  7. //var jsonData = '{"name_short":"SHORT NAME","name_long":"LONG NAME","submitter":"SUBMITTER","photo":"PHOTO","caption":"CAPTION","text":"TEXT"}';
  9. $('#table_FamilyPages').on('click', 'tbody tr', function() {
  10. console.info( 'fam_ID: ' + oTable.row(this).cell(this, 1).data());
  11. var famID = oTable.row(this).cell(this, 1).data();
  13. request = $.ajax({
  14. url: "files_ajax/ajax_FamilyPage_Single.php?fam_ID=" + famID,
  15. dataType: "json"
  16. });
  18. // callback handler that will be called on success
  19. request.done(function () {
  20. $('#pages_remote').hide();
  21. $('#pages_local').hide();
  23. // Code here to display page info
  24. var aData = jQuery.parseJSON(request.responseJSON);
  25. document.getElementById('idLongName').innerHTML = aData.name_long; //"Long Name";
  27. $('#pages_family').show();
  28. });
  30. // callback handler that will be called on failure
  31. request.fail(function (jqXHR, textStatus, errorThrown){
  32. // Inform user of the error and log to console for debugging
  33. var errMessage = "The following error occured: " + textStatus + ' - # ' + errorThrown;
  34. alert(errMessage);
  35. console.error(errMessage);
  36. });
  38. // callback handler that will be called regardless if failed or succeeded
  39. request.always(function () {
  40. // reenable the inputs
  41. });
  42. });
  44. });
The above produces the following error at line 24
  1. SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
Removing the comment tag at line 6 and changing line 24 to 
  1. var aData = jQuery.parseJSON(jsonData);
results in a valid result.

I assume that the problem is with the Ajax code or with the use of the returned array. Given that I am a novice in this area I have no clue as to what to do. All of the on-line examples I can find make use of the in-line array which really doesn't address the issue of using an Ajax call.

TIA for your assistance.
jdadwilson