ajax.json() returns undefined

kralphs

Hi, I'm using server side processing and passing a function to control my ajax calls since I have to pass any requests through some custom tools. I need to display some additional data (total value of all filtered records); however, whenever I try to use ajax.json() it returns as undefined. The JSON response is coming back just as I want it, and the api is updating everything correctly. Here is the code:

renderDataTableShell(config.divSelector).dataTable(createDataTableOptions())

function createDataTableOptions() {
        return {
            serverSide: true,
            ajax: function (data, callback, settings) {
                var promise = portalCall("remote_method_name", JSON.stringify(data, null, null))
                promise.done(function (serverData){
                    jsonData = JSON.parse(serverData);
                    callback(jsonData);
                })
            },
            processing: true,
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api();
                var totalColumn = 6;
     
                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };
     
                // Total over all pages, but filtered by the applied search
                var json = api.ajax.json();
                total = json ? json.total : 0;
     
                // Total over this page
                pageTotal = api
                    .column( totalColumn, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
     
                // Update footer
                $( api.column( totalColumn ).footer() ).html(
                    '$'+ pageTotal.toFixed(2) +' ( $'+ total.toFixed(2) +' total)'
                );
            },
}

function renderDataTableShell(divSelector) {
    let table = $(`<table 
                            width=100%
                            id = "${divSelector}_table" 
                            class = "nowrap display hover order-column row-border">
                            <thead>
                                <tr>
                                    <th>Test Column 1</th>
                                    <th>Test Column 2</th>
                                    <th>Test Column 3</th>
                                    <th>Test Column 4</th>
                                    <th>Test Column 5</th>
                                    <th>Test Column 6</th>
                                    <th>Test Column 7</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Row 1 Data 1</td>
                                    <td>Row 1 Data 2</td>
                                    <td>Row 1 Data 3</td>
                                    <td>Row 1 Data 4</td>
                                    <td>Row 1 Data 5</td>
                                    <td>Row 1 Data 6</td>
                                    <td>Row 1 Data 7</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="6" style="text-align:right">Total:</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    `);

    $('#' + divSelector).append(table);
    return table;
}

Here's a pictures showing the JSON coming back with the additional information:

I removed some of the code for options that I didn't think was relevant to the problem, but felt I should include the overall way the code is structured in case that's contributing. Sorry for being verbose. I know some of it is somewhat nonstandard, but I started with someone else's code and have been refactoring it.

I also tried re-instantiating the api through the browser console, and although I can access all the rest of the information like ajax.params() from the table, ajax.json() still comes back undefined.

Thanks!

colin

Hi @kralphs ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kralphs

Here's a JS Bin version that recreates the issue. It's basically the example on the ajax.json() page, but with a function feeding the JSON and changing the alert so it doesn't try to access json.data as that throws an error. Data shows fine on the table, but if you do anything to trigger the xhr event, undefined is returned.

https://jsbin.com/vejaxakaru/1/edit?html,js,output

colin

Hi @kralphs ,

Thanks for that test case - it helped understand what you're after.

The undefined is expected in your case, see the docs for ajax.json() :

Furthermore, if the ajax option is given as a function, this method will return undefined rather than the JSON string, since the given function effectively overwrites DataTables own Ajax handler.

In this example, where the Ajax request is being initiated, the expected data is being returned.

Hope that helps,

Cheers,

Colin

kralphs

Thanks! Time to go head my hang in shame after not reading the documentation closely enough lol

dener2502

hello, i'd like to know how you did to solve the problem and get the ajax json, i saw that it is related to the method but i'd like to see an example of what you have changed to solve this.

colin

If you have a method for the ajax option, you would need to store it the response in a variable that you can access later,

Colin

dener2502

I'm using AJAX, not as a function directly, but as an attribute of datatables. is there any way to save like this? see the example:

table.dataTable({
ajax : {
"url": "/urlTest",
"type": "POST",
"data": {
"testData": "123"
}
}
});

kthorngren

Did you see the example Colin posted?
http://live.datatables.net/rawanise/4/edit

It shows getting the ajax.json() object in the xhr event. You aren't limited to using ajax.json() in that event. If you are still having difficulties please provide more details of how you are trying to use ajax.json() and the problem you are having. Better is to update Colin's test case to show the issue.

Kevin