No data in table but datasrc shows data

hlh

Hi I have a datatable that I am populating from a method in C#. The datatable returns some json which I have validated, however my columns never get populated and instead I get a message that says "No data available in table." I'm completely stuck so hoping someone can help!

```var table = $('#example').DataTable({
            ajax: {
                url: pageUrl,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                dataSrc: function (data) {
                    console.log(data.d);
                    return $.parseJSON(data.d);
                }
            },
            "pageLength": 50,
            fixedHeader: true,
            responsive: true,
            "columns": [
                {
                    "data": "key",
                    "render": function (data, type, row, meta) {
                        if (type === 'display') {
                            data = '<a href="/software/details.aspx?id=' + data + '">' + data + '</a>';
                        }

                        return data;
                    } },
                { "data": "summary" },
                { "data": "created" },
                { "data": "updated" },
                { "data": "Status" },
                { "data": "priority" },
                { "data": "reporter" },
                { "data": "assignee" }
            ],
            autoWidth: false,
            "columnDefs": [
                { "width": "50%", "targets": 0 },
                { "width": "5%", "targets": 1 },
                { "width": "5%", "targets": 2 },
                { "width": "5%", "targets": 3 },
                { "width": "5%", "targets": 4 },
                { "width": "5%", "targets": 5 }
            ],
            "order": [[1, 'asc']],
            "success": fnsuccesscallback,
            "error": fnerrorcallback
        });

        function fnsuccesscallback(data) {
            alert(data.d);

        }

        function fnerrorcallback(result) {
            alert(result.statusText);
        }```

And this is the data in the console.log output:

{"summary":"External Change Request Form: tester - 19/1/2021","created":"2021-01-19T15:32:02+00:00","updated":"2021-06-03T08:59:17+01:00","status":"To Do","key":"ITS-4711","assignee":"Bob","priority":"Low","reporter":"Dave"}

kthorngren

Is that the full response? Datatables expects an array of rows even if its just one row. Your data is not in an array. See the ajax docs for more details.

kevin

hlh

Hi, I altered two things;

The datasrc was converting it to json and it was already converted prior to passing it back, so I changed it to return data without parsing it:

dataSrc: function (data) { console.log(data.d); return (data.d); }

Changed the formatting of the data that I was pulling back. Example below.

However I'm getting an error that says

"Requested unknown parameter 'Key' for row 0, column 0."

And then it display 982 blank rows!

{ "data": [ {"Summary":"Create lists of useful fields for Tableau", "Created":"11/06/2020 13:03:36", "Updated":"18/01/2021 07:48:56", "Status":"Done", "Key":"PGT-2766", "Assignee":"Jane Doe", "Priority":"Lowest", "reporter":"Dave" },{"Summary":"test", "Created":"13/01/2021 14:30:04", "Updated":"13/01/2021 14:30:06", "Status":"To Do", "Key":"PGT-4622", "Assignee":"admin_user", "Priority":"Low", "reporter":"Dave" },{"Summary":"Review Programme queues", "Created":"15/02/2021 14:32:21", "Updated":"08/03/2021 08:08:12", "Status":"In Progress", "Key":"PGT-5185", "Assignee":"Jane Doe", "Priority":"High", "reporter":"Dave" },{"Summary":"External Change Form: Bob - 19/1/2021", "Created":"19/01/2021 15:32:02", "Updated":"03/06/2021 08:59:17", "Status":"To Do", "Key":"PGT-4711", "Assignee":"admin_user", "Priority":"Low", "reporter":"Dave" } ] }

kthorngren

You have "data": "key", but your JSON response has "Key":"PGT-2766". Change it to "data": "Key". Javascript is case sensitive. Make sure the others match the case as well.

Kevin

hlh

@kthorngren thanks changed it, but I still get the same problem!

Left my data the same and changed the datatable columns to look at this:

"columns": [
             { "data": "Key" },
            { "data": "Summary" },
            { "data": "Created" },
            { "data": "Updated" },
            { "data": "Status" },
            { "data": "Priority" },
            { "data": "reporter" },
            { "data": "Assignee" }
        ],

However I'm still getting the same error about Key and also a lot of empty rows!

kthorngren

if data.d is { "data": [ {"Summa..... then maybe you need to return data.d.data. Also make sure the array is an array not a string.

Kevin

hlh

@kthorngren thanks for your help so far!

I was returning a string but I've now changed that over to an object in C# and when I output it to the console I get this:

When I try and return data.d.data in the dataSrc I get an undefined.

I'm still getting the same issue as before with tons of empty rows!

I've also tried this which hasn't worked either

return (JSON.stringify(data.d)); 
OR 
return (JSON.stringify(data));

kthorngren

The escaped quotes (\") suggest that the data is JSON encapsulated twice by the server. See if Colin's answer in this thread helps.

Kevin

hlh

@kthorngren Thank you!!! That looks to have got me one step closer woo hoo!!!

So by doing this:

dataSrc: function (data) {
                    console.log(JSON.parse(data.d));
                    return (JSON.parse(data.d));
                }

I now get this!

However the datatable now says no data available!

I've double checked and my column names are correctly capitalised and match up with the names being pulled back in that array.

Do I need to reference my columns differently? I've tried data: and data.d just in case that made a difference.

 "columns": [
                { "data.d": "key" },
                { "data": "summary" },

kthorngren

The option is columns.data to define the columns. { "data.d": "key" } won't work. Looking at the examples in the ajax.dataSrc docs the last example shows using a function. Its returning json.data which looks like this by default {"data": [...]}. Based on that I think your function should look something like this:

dataSrc: function (data) {
                    console.log(JSON.parse(data.d));
                    var tableData = JSON.parse(data.d);
                    return tableData.data;
                }

Kevin

hlh

@kthorngren that has worked!!!! Thank you so much - you have been a phenomenal help!!!