Passing client-side JSON to dataTable - syntax? - json

Question

I'm stuck trying to pass JSON to a dataTable.
I load JSON at a different point in the script, then truncate the part I need and pass it into a function that is supposed to render the table.
The function is:
function populateCasesTable(d){
var json = d.cases;
var cols = [
{ "data" : json.service_area},
{ "data" : json.presenting_issue },
{ "data" : json.referred_by },
{ "data" : json.date_opened },
{ "data" : json.case_status },
{ "data" : json.preferred_staff }
];
console.log(json);
$('#cases_table').DataTable( {
"data": json,
"columns": cols
} );
}
HTML for the table is
<table id='cases_table' width="100%">
<thead>
<tr>
<th>Service Area</th>
<th>Presenting Issue</th>
<th>Referred by</th>
<th>Date opened</th>
<th>Status</th>
<th>Preferred Staff</th>
</tr>
</thead>
</table>
The console.log output returns the right amount of objects (12) and a single object looks eg:
0 Object:
action:9
case_status:"Open"
date_created:"11/07/2017"
date_opened:"11/07/2017"
file:5
id:31646
issues:8
preferred_staff:"Doc Kuran"
presenting_issue:"Anxiety Disorder"
referral:0
referred_by:"Academic staff"
serviceAreaId:14
service_area:"Disability Services"
staff:0
I get the right number of pages rendered accompanied by the cryptic 'DataTables warning: table id=cases_table - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4' pop-up.
I'm sure this is a config issue, but I could not work this out.
What am I missing?
Thanks.

Answer 1

I found it. Cols must be set as follows:
var cols = [
{ "data" : 'service_area'},
{ "data" : 'presenting_issue' },
{ "data" : 'referred_by' },
{ "data" : 'date_opened' },
{ "data" : 'case_status' },
{ "data" : 'preferred_staff' }
];