How to use a local JSON object with angular-datatables

Question

I would like to do this :

testdata = [{"id":"58",...}]; // local object

$('#test').dataTable({
    "aaData": testdata,
    "aoColumns": [
        { "mDataProp": "id" }
    ] });

with the angular-datatables module. I have tried this :

Controller

$scope.dtOptions = DTOptionsBuilder.fromSource('[{"id": 1}]')
        .withDataProp('data')
        .withBootstrap()
        .withPaginationType('full_numbers');
$scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID')
];

View

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>

But it doesn't work at all, and I get this error message :

DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7

Also, I can't use any Ajax options to get json data from an URL, because my angularjs project uses Express and the Rest API, so I get 401 not authorized error while trying to get my data with a GET/POST URL like "/api/data/getJsonData".

Any ideas ? Thanks.

Answer 1

I had a similar problem to the OP and Mica's answer was very helpful in pointing me in the right direction. The solution I used was as follows:

var getTableData = function() {
    var deferred = $q.defer();
    deferred.resolve(myTableDataObject); 
    return deferred.promise;
};

Then use that in the DTOptionsBuilder:

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(getTableData)
    .withPaginationType('full_numbers');

I'm fairly new to Angular, and indeed JavaScript, so there may well be a more elegant/correct way of doing this, but it worked for me.

Answer 2

You can't use .fromSource as it always will do an ajaxUrl request. But you can use .fromFnPromise() instead. Put your JSON into a function which returns an deferred.promise.