1. Warning: Invalid JSON response

A warning from DataTables stating "Invalid JSON response" is one of the most common errors that can occur with DataTables. Fortunately it is fairly easy to diagnose what is going wrong, with the developer tools built into modern web-browsers. This guide shows exactly what the error means, how to diagnose the issue and how to resolve it.

Meaning

When loading data by Ajax (ajax), DataTables by default, expects the data loaded to be valid JSON. JSON is a data-interchange format that has provide to be extremely populate on the web, due to its compatibility with Javascript, its ease of use and the fact that it is easily human readable. However, like all data-interchange formats, it has strict rules about what is valid JSON. Anything that does not meet this criterion is invalid JSON, and will throw an error in DataTables where it expects JSON.

When DataTables shows the message:

DataTables warning: table id={id} - Invalid JSON response.

it means exactly what it says. DataTables made an Ajax response to the server for JSON data, but the data that it received back was not valid JSON.

Diagnosis

If the server didn't reply to the Ajax request with valid JSON data, we need to know what it did reply with, so we can take corrective action. Typically, the response will consist of an error message from the program on the server which is being used to create the JSON, which will be the starting point for resolving the issue fully.

Server data

Modern browsers all come with built in developer tools, which can be used to find out what data the server is responding to the DataTables Ajax request with. Instructions on how to do this with your browser are shown below.

Safari

1. By default Safari hides its built-in developer tools. If you don't have a Develop menu shown in Safari it needs to be enabled. If you do, jump to step 3.
   • Open the Safari menu and select Preferences...
2. Enable the developer menu in the Advanced tab
   • Click the Advanced tab in the Preferences window
   • Check the box for Show Develop menu in menu bar option
   • Close the preferences - the Develop menu will now be shown
3. View the resources the page has loaded
   • Select the Show Page Resources option from the Develop menu.
   • The developer console will show at the bottom of the page
   • Reload the page so Safari can capture all network requests
4. Details about the Ajax request are shown.
   • Safari will show a list of all resources (images, scripts etc) which have been loaded for the page. Locate the Ajax request that has been made to the server and click it. Safari will show detailed information about the request.
   • Note that on pages with a large number of resources, Safari will group the resources by type into folders. If this happens on your site, look for the "XHRs" folder for the Ajax requests.

Please note that these instructions were written with Safari 7 as the version used. Newer versions might have slightly different steps.

Chrome

1. To access the developer tools in Chrome:
   • Mac: Access the View > Developer > Developer Tools menu option.
   • Windows: Click the Chrome menu (to the right of the address bar) and select Tools > Developer Tools.
2. The Developer tools are shown at the bottom of the current browser window. Chrome will show the Javascript console by default.
   • Click on the Network tab to view network requests
   • Refresh the page to allow Chrome to capture all requests
3. The network panel will show all of the requests made by Chrome to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by DataTables
4. Details about the Ajax request are shown.
   • Click the Response tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Chrome 31 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

Firefox

1. To access the developer tools in Firefox:
   • Mac: Access the Tools > Web Developer > Network menu option.
   • Windows: Click the Firefox menu (top left of the window) and select Web Developer Network option.
2. The Developer tools are shown at the bottom of the current browser window.
   • Refresh the page to allow Firefox to capture all requests
3. The network panel will show all of the requests made by Firefox to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by DataTables
4. Details about the Ajax request are shown.
   • Click the Reponse tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Firefox 26 Windows as the version used. Newer versions, or those on different platforms might have slightly different steps.

IE

1. To access the developer tools in IE:
   • Press F12 or,
   • Click the tools menu (top right, a cog icon) and select the F12 developer tools option.
2. The Developer tools are shown at the bottom of the current browser window. IE will show the document tree by default.
   • Click on the Network tab to view network requests
3. IE requires that network traffic be specifically tracked, which we want here.
   • Click the Start capturing button to capture network requests
   • Refresh the page to allow IE to capture all requests
4. The network panel will show all of the requests made by IE to load the page.
   • Double click the Ajax request made by DataTables - it will likely be at or near the bottom of the request list
5. Details about the Ajax request are shown.
   • Click the Reponse body tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with IE 10 as the version used. Newer versions might have slightly different steps.

Opera

1. To access the developer tools in Opera:
   • Mac: Right click or ctrl click the document and select the Inspect element option.
   • Windows: Right click the document and select the Inspect element option.
2. The Developer tools are shown at the bottom of the current browser window. Opera will show information about the element that was clicked on.
   • Click on the Network tab to view network requests
   • Refresh the page to allow Opera to capture all requests
3. The network panel will show all of the requests made by Opera to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by DataTables
4. Details about the Ajax request are shown.
   • Click the Reponse tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Opera 18 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

JSON validation

Once you have the Ajax data response from the server, you can validate the JSON using a tool such as JSON Lint or JSON Parser. Often the error in the JSON response from the server will be very obvious, but a JSON Linter can provide to be very useful for resolve the less obvious issues, such as trailing commas.

Resolution

Once you have followed the instructions above to find out what the data from the server actually is, since it is not JSON, you will be able to modify the data, or the program that creates the data, to return valid JSON only.