How to use 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 angular -datatables module. I 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 this does not work at all, and I get this error message:

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

Also, I cannot use any Ajax parameters to get json data from the URL, because my angularjs project uses Express and Rest API, so I get 401 invalid error when trying to get my data using GET / POST URL address, for example, "/ api / data / getJsonData".

Any ideas? Thanks.

Answer 1

You cannot use .fromSource as it will always execute ajaxUrl request. But you can use .fromFnPromise (). Put your JSON in a function that returns a deferred .promise.

Answer 2

I had a similar problem with the OP and Mica answer, which really helped me point 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 this in DTOptionsBuilder:

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

I am new to Angular and really JavaScript, so there might be a more elegant / proper way to do this, but it worked for me.