How can I use a local JSON object as a data source for jQuery DataTables

Question

I have a local JSON object formatted like this:

[{     "id": "58",     "country_code": "UK",     "title": "Legal Director",     "pubdate": "2012-03-08 00:00:00",     "url": "http://..." },{     "id": "59",     "country_code": "UK",     "title": "Solutions Architect,",     "pubdate": "2012-02-23 00:00:00",     "url": "http://..." },{     // ....more of the same...... }] 

I would like to set this as the data source for a jQuery datatable and have tried this:

testdata = '{{ jobsJSON | raw }}'; //twig template tag console.log(testdata); $('#test').dataTable({     "aoData": testdata,     "aoColumns": [         { "mDataProp": "id" },         { "mDataProp": "country_code" },         { "mDataProp": "title" },         { "mDataProp": "pubdate" },         { "mDataProp": "url" }     ] }); 

The DataTables plugin loads and attempts to draw the table but gives the error 'No data available in table'

I am not making an AJAX call and just want to access the JSON object from a local JS variable.

Answer 1

The property to supply your own data is aaData NOT aoData:

testdata = [{"id":"58",...}]; // local object  $('#test').dataTable({     "aaData": testdata,     "aoColumns": [         { "mDataProp": "id" },         { "mDataProp": "country_code" },         { "mDataProp": "title" },         { "mDataProp": "pubdate" },         { "mDataProp": "url" }     ] }); 

Working fiddle