Ajax response is not show in DataTable

peter21

Hello there,

i'm new to DataTable. Sorry if this is a very simple question but I can't get it to work.
My JSON data is simply not shown in the table.

Javascript

$(document).ready(function(){
    var table = $('#overview').DataTable({
        "order": [
            [1, "desc"]
        ],
        "pageLength": 25,
        "ajax": "https://..../api/dataXYZ.php?mode=active",
        "columns": [
            { "data": "active['title']" },
            { "data": "active['item_id']" },
        ],
    });
});
</script>

JSON response

{
    "active":[
        {
            "item_id":"1234",
           "title":"Test 1234"
        },
        {
            "item_id":"5678",
            "title":"Test 5678"
        }
    ]
}

Error

Uncaught TypeError: Cannot read property 'length' of undefined
    at fetchData (jquery.dataTables.js:1260)
    at jquery.dataTables.js:1293
    at Object.oCol.fnGetData (jquery.dataTables.js:702)
    at _fnGetCellData (jquery.dataTables.js:1112)
    at _fnCreateTr (jquery.dataTables.js:1694)
    at _fnAddData (jquery.dataTables.js:1037)
    at jquery.dataTables.js:3315
    at callback (jquery.dataTables.js:2439)
    at Object.success (jquery.dataTables.js:2469)
    at j (jquery-1.11.3.min.js:2)

If I replace active with data in the JSON response and set columns like this

"columns": [
    { "data": "title" },
    { "data": "item_id" },
],

everything works as expected.

Question
So the question is: How to get the code working without modifying my JSON response?

Thanks and best regards

kthorngren

Since your JSON data is not contained in the default location that Datatables uses to find the data you will need to use ajax.dataSrc to point to active. For example:

    var table = $('#overview').DataTable({
        "order": [
            [1, "desc"]
        ],
        "pageLength": 25,
        "ajax": {
            url: "https://..../api/dataXYZ.php?mode=active",
            dataSrc: "active"
        },
        "columns": [
            { "data": "title" },
            { "data": "item_id" },
        ],
    });

See the ajax docs for more info.

Kevin

peter21

Perfect. Thank you very much Kevin. This solved my problem.