0

I am using angular-datatables v0.5.x and I would like to load a local JSON object. Based on my research I know that I have to use a promise. From my console.log I can see that the deferred.promise is populated with the json data. So I assume it is returned correctly to DTOptionsBuilder.fromFnPromise(). However none of the data is displayed in the data table. Any help would be very appreciated! HTML:

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="row-border stripe compact hover">
</table>

AngularJS Controller:

var getTableData = function(jsonObj) {
    console.log('get table data function');
    var deferred = $q.defer();
    deferred.resolve(jsonObj); 
    console.log(deferred.promise);
    return deferred.promise;
};

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

$scope.dtColumns = [
    DTColumnBuilder.newColumn('col1').withTitle('Column 1'),
    DTColumnBuilder.newColumn('col2').withTitle('Column 2'),
    DTColumnBuilder.newColumn('col3').withTitle('Column 3'),
    DTColumnBuilder.newColumn('col4').withTitle('Column 4')
                    ];
 $scope.dtInstance = {};

The json object:

[{
    "col1": "Column 1",
    "col2": "Column 2",
    "col3": "Column 3",
    "col4": "Column 4"
}]
Marjorie Pickard
  • 109
  • 1
  • 2
  • 10
  • I don't see any `$scope.dtOptionsTransactionsByPOS`, neither this nor `$scope.dtColumnsTransactionsByPOS`. Even the dtinstance is incorrect, you are assigning undefined values to your datatable, hence it can't work in any way. – briosheje Jun 22 '17 at 12:56
  • Im sorry, I changed the names for the example. Those should be dtOptions, dtColumns, dtInstance. I will edit it. – Marjorie Pickard Jun 22 '17 at 13:04

1 Answers1

-1

Does your table expect the columns to be provided as an object or as an array of objects?

I see that your JSON object your passing to the table is an array of objects!

Try passing

{
    "col1": "Column 1",
    "col2": "Column 2",
    "col3": "Column 3",
    "col4": "Column 4"
}

or else change

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

to

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(getTableData(jsonObj[0])) .withPaginationType('full_numbers');

dev
  • 900
  • 2
  • 12
  • 26
  • I hope it will be an array of objects. Otherwise I could not add multiple lines to the datatable. Since I am only testing I only have one object. – Marjorie Pickard Jun 22 '17 at 13:26
  • 1
    You should **always** pass an array of objects to dataTables, no matter what kind of datasource you are using, remote or not, plain JSON or complex server-response. The only exception is that you can pass an array of array of strings, merely for backward compatibility. This is simply how dataTables works. – davidkonrad Jun 23 '17 at 06:50