DataTables warning: table id=token-table - [object Object]

tarunsharma967

I am getting following error for my datatable, i am not getting this error message.
DataTables warning: table id=token-table - [object Object]

       var table1 = $('#token-table').DataTable( {
           "ajax"       : {
                "url"    : token,
                "dataSrc": function ( data ) {
                    let arr = [];
                    for (key in data) {
                        arr.push({
                            name : key,
                            freq : data[key]['frequencycount'],
                            freqPercent : data[key]['percentvalue'],
                        });
                    }
                    return arr;
                    }
                },
                "columns": [
                    { "data": "name" },
                    { "data": "freq" },
                    { "data": "freqPercent" },
                ],
                deferRender : true,
                scrollY     : 500,
                scroller    : true,
               } );

       setInterval( function () { table1.ajax.reload(null,false) }, 10000 );    

            <table id="token-table">
                <thead>
                    <tr>
                        <th class="col-md-6">Token Name</th>
                        <th class="col-md-3">Frequency count</th>
                        <th class="col-md-3">Frequency Percent</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

This is my code for dataTable.

colin

Hi @tarunsharma967 ,

It looks like it should work. 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

denny_kurniawan

I am also have the same problem, this is my test case.

and this is my JS code:

let tableDeveloper = $('#tableDeveloper').DataTable({
    ajax : {
        url : 'text.txt',
        dataType: "json",
        dataSrc : function(json) {
            console.log(json)
            let temp, data = []

             for (var i=0;i<json.data.developer.length;i++) {
                temp = json.data.developer[i];
                item = {};

                item["nomor"] = (i+1);
                item["id"] = temp.id;     
                item["name"] = temp.developer_name;
                item["icon"] = null;
               item["active"] = temp.is_active;
               item["description"] = temp.description;

                data.push(item);
            }
             return data;
        }
    },
    "columns": [
        { "data": "nomor"},
        { "data": "name" },
        { "data": "icon" },
        { "data": "description" },
        { "defaultContent": "<buttontype='button' class='btn btn-primary'>Edit</button> <button class='btn btn-danger'> Delete</button>"}
    ]

Thank you.

tangerine

I'm getting "This site can’t be reached : www.signaltekno.com took too long to respond." from Chrome.

denny_kurniawan

Thanks, @tangerine. Sorry about that, my server hosting location is in Asia. So maybe it's taking too long when you are from another country. I didn't realize this before posting.

denny_kurniawan

And this is my JSON file, in case. website can't be accessed.

{
    "code": 200,
    "data": {
        "developer": [
            {
                "id": 4,
                "developer_name": "Ubisoft",
                "icon": null,
                "header": null,
                "description": "",
                "is_active": 0,
                "updated_at": "2021-07-23T12:17:57.000000Z"
            },
            {
                "id": 7,
                "developer_name": "Digital Hippies Games",
                "icon": null,
                "header": null,
                "description": "",
                "is_active": 0,
                "updated_at": "2021-07-24T06:47:02.000000Z"
            },
            {
                "id": 8,
                "developer_name": "SuperCell",
                "icon": null,
                "header": null,
                "description": "",
                "is_active": 1,
                "updated_at": "2021-07-24T07:45:47.000000Z"
            },
            {
                "id": 9,
                "developer_name": "Capcom",
                "icon": null,
                "header": null,
                "description": "",
                "is_active": 1,
                "updated_at": "2021-07-24T07:47:18.000000Z"
            },
            {
                "id": 10,
                "developer_name": "Moonton",
                "icon": null,
                "header": null,
                "description": "",
                "is_active": 1,
                "updated_at": "2021-07-24T12:09:38.000000Z"
            },
            {
                "id": 11,
                "developer_name": "Capcom",
                "icon": null,
                "header": null,
                "description": "",
                "is_active": 1,
                "updated_at": "2021-07-24T14:21:15.000000Z"
            }
        ],
        "message": "success"
    },
    "error": {
        "message": ""
    }
}

denny_kurniawan

This is my new updated test case. Sorry for the inconvenience.

kthorngren

Looks like you row data is in data not data.developer:

You are getting this error:

Uncaught TypeError: Cannot read property 'length' of undefined

You need to change everywhere you are using data.developer to just data, for example in this statement - which is generating the error:

for (var i=0;i<json.data.developer.length;i++) {

Kevin

denny_kurniawan

Thanks, Kevin for your answer, but the warning alert is still shown. Even tho I changed the JSON file and add the developer field. The data is shown, but the alert dialog keep shown every time refreshes the page.

kthorngren

Have you debugged the result of your loop? What is the value of data before the return data statement in the ajax.dataSrc function?

Kevin

vdsantos

Hi to everyone.
I'm having the same problem. Can anyone help me? Everything looks ok.

$('#tb_statusGeral').DataTable({
searching: false,
scrollY: $('body').height() - 217,
lengthMenu: false,
pageLength: 20,
pagingType: "simple_numbers",
ordering: false,
language: {
processing: 'Processando...',
search: '',
lengthMenu: '',
info: 'PAGE - PAGES de MAX',
infoEmpty: 'Nenhum dado disponível',
infoFiltered: '',
infoPostFix: '',
loadingRecords: 'Carregando registros...',
zeroRecords: 'Nenhum dado disponível',
emptyTable: 'Realize uma busca de um status.',
searchPlaceholder: 'Pesquisar esta exibição',
paginate: {
first: 'Primeiro',
previous: '<i class="pag-arrow-left"></i>',
next: '<i class="pag-arrow-right"></i>',
last: 'Último'
}
}, ajax....

Help?

kthorngren

@vdsantos Its hard to say what the problem might be with what you posted. Not sure what the screenshot is showing. Use the browser's network inspector and show use a snippet of the XHR response. You removed the ajax option. Is it just the URL or do you have other ajax options configured?

Looks like you have an array of objects. Have you configured columns.data? See if the Data and Ajax docs help.

Can you provide a link to your page or a test case replicating the issue so we can take a look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

If not maybe the Debugger will give the developers the needed information to help. Post your generated ID.

Kevin

ivlketov

Hi, @denny_kurniawan, try to rename "error" property. I had the same problem and this helped me.

ja_hern

Similar to @denny_kurniawan
our api always returns a response object with an “error” object that is empty if there was no issue. We would see the alert and the Ajax error would just say [object Object] and then the rows would load without issue once the alert was closed. Worked around it by changing this particular api call to just return the data for now, but may try the ‘errMode’ config as mentioned at the end of the tech note for the Ajax error page. Just an FYI that may save someone time

allan

DataTables expects the error property in the JSON return from the server to be a string. If you return an object, then yes, it would say [object Object] since that is the .toString() value of an object.

Allan