Accessing json data in Angularjs Datatables

Question

I have a json file (test.json) that is used by a D3 chart, and I am trying to use it to feed an Angular-Datatable below the chart. The chart requires me to use a different data format than Angular-Datatables.

My test.json data format:

[{
"values":[
 {
 "series":0,
 "y":0,
 "x":1393545100000,
 "system": "Hardware",
 "tableProp1": "Component1",
 "tableProp2": "04-08-2015 10:21:01",
 "tableProp3": "3"
 },
 {
 "series":0,
 "y":0,
 "x":1393545100000,
 "system": "Hardware",
 "tableProp1": "Component1",
 "tableProp2": "04-08-2015 10:21:01",
 "tableProp3": "3"
 },
 ]
}]

Datatable's expected data format:

[{
 "series":0,
 "y":0,
 "x":1393545100000,
 "system": "Hardware",
 "tableProp1": "Component1",
 "tableProp2": "04-08-2015 10:21:01",
 "tableProp3": "3"
 },
 {
 "series":0,
 "y":0,
 "x":1393545100000,
 "system": "Hardware",
 "tableProp1": "Component1",
 "tableProp2": "04-08-2015 10:21:01",
 "tableProp3": "3"
}]

The dataTables withDataProp will only work on objects, not an array of objects. For example, I cannot access the first element of the data returned (aaData[0].values).

vm.dtOptions = DTOptionsBuilder
 .fromSource('data/busProbHist/test.json')
 .withDataProp(aaData[0].values)

I considered using withFnServerData(fn) and modifying the data before the table uses it, but I'm not sure how to return the data via the success property.

angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
 var vm = this;
 vm.dtOptions = DTOptionsBuilder.fromSource('data/busProbHist/test.json')
 .withFnServerData(serverData);
 function serverData(sSource, aoData, fnCallback, oSettings) {
 oSettings.jqXHR = $.ajax({
 'dataType': 'json',
 'type': 'GET',
 'url': 'data/busProbHist/test.json',
 'data': aoData,
 'success': function(aoData){return aoData[0].values}
 });
}
}

Any ideas?

Answer 1

Use this code instead:

vm.dtOptions = DTOptionsBuilder
 .fromSource('data/busProbHist/test.json')
 .withDataProp('0.values');

• user1824797: worked like a charm. Thx! I was also able to use the "angular way" method (l-lin.github.io/angular-datatables/#/angularWay) to work around the problem.