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');