Trouble with data Ajax call
Trouble with data Ajax call
jptrue
Posts: 5Questions: 2Answers: 0
Hello,
I am trying to bind a datatable to data acquired via an ajax call, but the ajax call always returns an empty array.
However, a direct call to the data with a jquery ajax call returns the data successfully.
Here is my code:
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
var jsonData;
$.ajax({
url: "https://api.domain.com/group/",
type: 'GET',
success: function(data, textStatus, jqXHR)
{
console.log(data); //*** returns correct json data
}
});
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "https://api.domain.com/group/",
"type": "GET",
"dataSrc":"",
"complete": function(xhr, responseText){
console.log(xhr);
console.log(responseText); //*** responseJSON: Array[0]
}
}
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>name</th>
<th>description</th>
<th>createdAt</th>
<th>updatedAt</th>
<th>id</th>
</tr>
</thead>
<tfoot>
<tr>
<th>name</th>
<th>description</th>
<th>createdAt</th>
<th>updatedAt</th>
<th>id</th>
</tr>
</tfoot>
</table>
</body>
</html>
Here is the json returned by the jquery ajax call:
[
{
"experiments": [
{
"name": "Animation",
"description": "test",
"group": 1,
"createdAt": "2015-10-22T02:10:53.691Z",
"updatedAt": "2015-11-08T03:41:08.173Z",
"id": 2,
"build_number": "1.a.0032",
"url": "experiments/svg/saves.svg"
},
{
"name": "Technical Drawing",
"description": "test",
"group": 1,
"createdAt": "2015-10-31T22:39:31.374Z",
"updatedAt": "2015-11-08T04:05:46.258Z",
"id": 3,
"build_number": "1.a.0033",
"url": "experiments/svg/vacumatic.svg"
},
{
"name": "KeySpline Animation",
"description": "test",
"group": 1,
"url": "experiments/svg/escapement.html",
"build_number": "1.a.0034",
"createdAt": "2015-11-08T04:09:56.049Z",
"updatedAt": "2015-11-08T04:09:56.049Z",
"id": 4
}
],
"name": "SVG (Scalable Vector Graphics)",
"description": "SVG animation tests.",
"createdAt": "2015-10-22T02:05:02.156Z",
"updatedAt": "2015-11-08T03:08:32.662Z",
"id": 1
},
{
"experiments": [
{
"name": "Sails JS",
"description": "Building a restful api with Sails JS",
"group": 2,
"url": "https://api.jptrue.com",
"build_number": "1.a.0035",
"createdAt": "2015-11-10T03:04:31.383Z",
"updatedAt": "2015-11-10T03:22:03.192Z",
"id": 6
}
],
"name": "API (Application Program Interface)",
"description": "API tests.",
"createdAt": "2015-10-22T02:06:55.339Z",
"updatedAt": "2015-11-08T03:09:39.163Z",
"id": 2
},
{
"experiments": [
{
"name": "Dynamically generated alerts",
"description": "test",
"group": 3,
"url": "experiments/bootstrap/alert.html",
"build_number": "1.a.0035",
"createdAt": "2015-11-08T04:40:56.812Z",
"updatedAt": "2015-11-08T04:40:56.812Z",
"id": 5
}
],
"name": "Bootstrap",
"description": "Scalable Vector Graphics",
"createdAt": "2015-10-31T22:38:50.180Z",
"updatedAt": "2015-11-08T04:39:37.239Z",
"id": 3
}
]
Any help is greatly appreciated!
Thanks,
Jeff
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I don't have the answer, but for help the debug you should try to change your
dataSrc. You can check it changing to a function instead of empty it.change it to:
Thanks DirceuNazareth!
Unfortunately, I tried that exact code and the console shows the json as Array[0] or [].
Jeff
Did you check if the cache control is not interfering?
Like JQuery sends the request to the url "as is", but DT adds a
?_=timestampto avoid cache. Depending of your server side implementation it can be consumed as a parameter instead of flag.You can disable it adding in the ajax object of DT
"cache": true.ajax.cacheDirceuNazareth, you are a rockstar!
That did the trick.
Thanks so much,
Jeff
I am glad to hear it!
Best!