Trying Ajax JSON object method. Not building table. No errors
Trying Ajax JSON object method. Not building table. No errors
dimichele
Posts: 3Questions: 3Answers: 0
Link to test case: http://madco.tech/test.html
Error messages shown: Alert = DataTables warning: table id=table_id - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
Description of problem:
I'm new to DataTables.net.
Trying to use Ajax to read states.json file. Tried two methods (see code). Current method (using "ajax": mydata) object consolesout the object just fine. However, I get the alert above with no data displayed.
Followed all the instructions per the alert at the link http://datatables.net/tn/1. Everything was fine. Status 200 on everything.
Verified the JSON on JSON Lint. It was fine also.
My preferred method because I do not want to use all the columns in the database using the longer Ajax method using data: mydata and defining columns gave me numerous datatables.min.js errors. It's currently commented out.
Could not find this issue in the forums, examples, or manual.
FYI, if I use the server side method using PHP to get the data from the table all works as advertised. Would really like to do this local. This is for a mobile app and I would like to make the data available if the user is offline.
The code is pretty well commented and should be easy to figure out.
Thank you in advance!!!!!
Mike
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/js/jQuery.3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/af-2.3.5/r-2.2.7/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/af-2.3.5/r-2.2.7/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/backend.css"/>
</head>
<body>
<table id="table_id" class="display" style="width: 100%;">
<thead>
<tr>
<th>Initials</th>
<th>State</th>
<th>Distance</th>
<th>Adam Walsh</th>
<th>Applies To</th>
<th>Restictions</th>
<th>Updated</th>
<th>Flagged</th> //Commented out when using long method below
<th>ID</th> //Commented out when using long method below
</tr>
</thead>
<tfoot>
<tr>
<th>Initials</th>
<th>State</th>
<th>Distance</th>
<th>Adam Walsh</th>
<th>Applies To</th>
<th>Restictions</th>
<th>Updated</th>
<th>Flagged</th> //Commented out when using long method below
<th>ID</th> //Commented out when using long method below
</tr>
</tfoot>
</table>
<!-- Scripts -->
<script>
$(document).ready(function() {
console.log('Document ready');
/* Imports the local JSON file > mydata object */
fetchJSONFile('states.json', function(mydata){
console.log(mydata); // This works fine. Object is browsable
$('#table_id').DataTable( {
"ajax": mydata //Commented out when using long method below
/* Long method */
/* Tried Ajax method below, Shows many datatables.min.js errors */
/* Prefer this method because I don't want to use all the columns in database */
/* data: mydata,
columns: [
{ data: 'stateInitials' },
{ data: 'stateName' },
{ data: 'distance' },
{ data: 'awa' },
{ data: 'appliesTo' },
{ data: 'restrictions' },
{ data: 'asOfDate' },
] */
});
});
});
/* Function to fetch JSON file */
function fetchJSONFile(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
}
}
};
httpRequest.open('GET', path);
httpRequest.send();
}
</script>
</body>
</html>
Answers
In your case using
"ajax": mydatawill try to fetch from the URL in the variablemydata. Butmydatais not a URL thus the error.You have
/* data: mydata,which is close. You need to point to the array of rows. Try usingdata: mydata.posts.I've never used
httpRequest.send(). If its an async request you will need to use a callback to initialize Datatables. Otherwise datatables may initialize before the response populates themydatavariable. You will need to look at the docs forhttpRequest.send().Kevin