Get data in json using javascript and datatables

Question

I have a javascript as below, which can fetch the data from backed in json format. But How can i pass it to another function , i.e datatables to populate it

<script>
var returndata;

$.getJSON("/api/dashboard_data/", success);

function success(data) {
    returndata = data;
    window.alert(returndata);
    return returndata;
    // do something with data, which is an object
}

$(document).ready(function() {
      $('#example').DataTable( {
        data: returndata,
        columns: [
            { title: "Action" },
            { title: "Input" },
            { title: "State" },
            { title: "Completed" },
           { title: "Project" },
        ]
    } );
} );
 </script>

In above code in window.alert(returndata), i get the json data which has been returned from backed.

But the same variable "returndata" when i use it in function ready it is empty. How can i get it in ready function.

can you include the other function which use the `returndata` — Beginner, Nov 09 '16 at 08:49
what do you want to do with `returndata` value in document ready function ? Because when document ready function call nothing will assign to that variable first. — Kirankumar Dafda, Nov 09 '16 at 08:49

score 3 · Accepted Answer · answered Nov 09 '16 at 08:52

You are calling two asynchronous functions here. $.getJSON() and $(document).ready(). It looks that ready() is faster than getJSON() which means returndata is empty when you try to fill your data table.

Try this to make sure you have always the correct order:

<script>

$(document).ready(function() {
      $.getJSON("/api/dashboard_data/", function(returndata) {
           $('#example').DataTable( {
               data: returndata,
               columns: [
                    { title: "Action" },
                    { title: "Input" },
                    { title: "State" },
                    { title: "Completed" },
                    { title: "Project" },
               ]
           });
      }); 
});
</script>

lolsky · Answer 2 · 2016-11-09T08:54:44.460

Firstly, which jQuery plugin are you using for DataTables? Is it this one? The first thing I would do would be to put everything inside the $document.ready() as the documentation demonstrates. This ensures that all your code executes after the DOM is ready. Let me know what happens after that.

Also this part of the documentation could help if you are using the DataTables API. It could be as simple as a misspelling depending on what you're trying to do as quoted from the docs here:

The result from each is an instance of the DataTables API object which has the tables found by the selector in its context. It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable(). The former returns a DataTables API instance, while the latter returns a jQuery object.

1

this should be a comment. – Beginner Nov 09 '16 at 08:49

score 0 · Answer 3 · answered Nov 09 '16 at 09:01

0

I know this is not a good solution, just a hack. You can use window.setInterval or window.setTimeout function to check for data and execute the required function. Don't forget to clear the interval.

answered Nov 09 '16 at 09:01

karman

346
3
20

could you please share some example link ? – Naggappan Ramukannan Nov 09 '16 at 09:03
Here i have created that hack, i was talking about. https://jsfiddle.net/1Labtjn2/ – karman Nov 09 '16 at 09:33
You are using http://api.jquery.com/jQuery.ajax/ why dont you use async =true. It will wait for the response and gives success callback. – karman Nov 09 '16 at 09:41

score 0 · Answer 4 · answered Nov 09 '16 at 09:30

Follow the Datatables documentation: https://datatables.net/examples/server_side/simple.html

You'll have to do something like this:

$('#example').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": _getData(),
    "columns": [
        {title: "Action"},
        {title: "Input"},
        {title: "State"},
        {title: "Completed"},
        {title: "Project"}
    ]
});

function _getData(data, callback) {
    $.getJSON("/api/dashboard_data/", success);
    function success(data) {
    // you'll probably want to get recordsTotal & recordsFiltered from your server
        callback({
            recordsTotal: 57,
            recordsFiltered: 57,
            data: data 
        })
    }
}

I haven't tested this code, but this should guide you in the right direction :)

Get data in json using javascript and datatables

4 Answers4