Invalid JSON response error using JQuery DataTables with PHP & AJAX

Question

I'm working with DataTables for the first time, and I'm running into issues actually putting the data into the table. I believe I have matched the proper JSON format that DataTables calls for using the ajax option within, however I'm still receiving an "Invalid JSON Response" error on load.

Here's my JS, I have it in a separate file called within the HTML page:

$(document).ready(function () {
  $("#copingTable").DataTable({
    "ajax": {
      "url": "overviewdata.php",
      "type": "POST",
      "dataType": "json",
      "contentType": "application/json; charset=utf-8",
      "dataSrc": "data"
    },
    "columns": [
      {"data": "FormID"},
      {"data": "SubmittedBy"},
      {"data": "Email"},
      {"data": "Date"}
    ]
  });
});

And my PHP:

$storiesSql = "SELECT FormID, CONCAT(FirstName, ' ', LastName) AS SubmittedBy, Email, DATE_FORMAT(Date, '%m/%d/%Y') AS Date FROM Stories";
  $storiesStmt = $pdo->query($storiesSql);

  $dataArray = array();

  while($row = $storiesStmt->fetch()){
    array_push($dataArray, array("FormID"=>$row['FormID'], "SubmittedBy"=>$row["SubmittedBy"], "Email"=>$row["Email"], "Date"=>$row['Date']));
  }

  echo json_encode(array("data"=>$dataArray));

This is the format of the JSON Response I receive (edited to be correct):

{"data":[{"FormID":"5e9754efc8aec","SubmittedBy":"Test Test","Email":"[email protected]","Date":"04\/15\/2020"}

Any help would be greatly appreciated!

Edit: Added in the working code with mapped data source and columns from the answer below

Check the Response section of the Network tab to see the full response. Maybe there's some HTML or error messages before or after the JSON. — Barmar
– Barmar, Commented Apr 16, 2020 at 16:39
I meant server side and to make sure it's 100% JSON add this before output echo ...: header('Content-Type: application/json'); — Mostav
– Mostav, Commented Apr 16, 2020 at 16:56
Okay, so using the header code this is the format I'm getting: [{"FormID":"5e9754efc8aec"},{"FormID":"5e985dc946c58"},{"FormID":"5e987e6d4ad0e"},{"FormID":"5e988564524cb"}] — arw1016
– arw1016, Commented Apr 16, 2020 at 17:14

Mostav · Accepted Answer · 2020-04-16 17:42:51Z

1

As mentioned in my comments, check the format that your PHP script output (it should be a valid json with all required fields your JS code expect), then change datatype value to 'json' value and add contentType in ...ajax.contentType field:

$(document).ready(function () {
$("#copingTable").DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
      "url": "overview.php",
      "type": "POST",
      "dataType": "json",
      "contentType": "application/json; charset=utf-8",
      "dataSrc": ""
    }
  });
});

answered Apr 16, 2020 at 17:42

Mostav

2,6911 gold badge19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arw1016 Over a year ago

Thanks for all your help! This helped fix the problem :]

Collectives™ on Stack Overflow

Invalid JSON response error using JQuery DataTables with PHP & AJAX

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related