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.

danj1974 · Accepted Answer · 2016-09-04 20:10:38Z

15

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.

edited Sep 4, 2016 at 20:10

answered Jan 28, 2015 at 16:43

danj1974

4812 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jasmo2 Over a year ago

HEllo. exactly what do you mean with myTableDataObject . Is the javascript object?

danj1974 Over a year ago

@jasmo2 - yes, the data object you're trying to load into the table. So in the OP it would be testdata. This is from an old project, so I had to look it up again to remind myself and it looks like I made a mistake and should pass the function itself instead of calling it. I'll edit the answer accordingly, but feel free to modify it based on your experience.

Mica · Accepted Answer · 2015-01-23 15:05:20Z

11

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.

answered Jan 23, 2015 at 15:05

Mica

1,1099 silver badges9 bronze badges

1 Comment

Naila Akbar Over a year ago

Can you show some code that how we can do this in function?

Collectives™ on Stack Overflow

How to use a local JSON object with angular-datatables

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related