thomasvdbossche thomasvdbossche - 3 months ago 17
Javascript Question

ng-table TypeError: Cannot set property '$data' of null

I'm using ng-table to display information from an API call which I group like the example on the website.

However, the example on the website makes use of static information where as I need to make a new API call each time. When I don't include the $

scope.$watch('groupby', function(value)
function, I am amble to display the table for the first, initial call.

angular.module('myApp.controllers', ['ngTable','ui.bootstrap','dialogs'])
.controller('HomeCtrl', function($scope,$log, $rootScope, $modal, TimeService, EventServiceAPI, $filter, ngTableParams) {
var datum = new Date().setHours(0,0,0,0);
$scope.datum = datum;
var timestamp = Math.round(new Date().getTime()/1000);


var findAllEvents = function(timestampdata) {
EventServiceAPI.query({start: timestampdata, end: timestampdata + 3*24*60*60}).$promise.then(function(data) {

//var data = $filter('orderBy')(data, 'event.startHour');

$scope.$watch("data", function () {
$scope.tableParams.reload();
});

$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 100 // count per page

}, {
groupBy: function(item) {
return 'Start vanaf ' + item.event.startHour + ' uur';
},
total: data.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, 'event.startHour') :
data;

$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

$scope.$watch('groupby', function(value){
$scope.tableParams.settings().groupBy = value;
console.log('Scope Value', $scope.groupby);
console.log('Watch value', this.last);
console.log('new table',$scope.tableParams);
$scope.tableParams.reload();
});
})
};

findAllEvents(timestamp);

$scope.getEarlier = function() {
datum -= (24 * 60 * 60 * 1000);
$scope.datum = datum;
var timestamp = Math.round(datum/1000);
console.log(timestamp);
findAllEvents(timestamp);

};
});


EDIT:

I am now able to display the data, however the groups are not displayed:

var datum = new Date().setHours(0,0,0,0);
$scope.datum = datum;
var timestamp = Math.round(new Date().getTime()/1000);

EventServiceAPI.query({start: timestamp, end: timestamp + 3*24*60*60}).$promise.then(function(data) { $scope.data = data; initlizeTable(); });


var initlizeTable = function() {
// Table
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 100 // count per page

}, {
groupBy: function(item) {
return 'Start vanaf ' + $scope.data.event.startHour + ' uur';
},
total: $scope.data.length,
getData: function($defer, params) {
var data = EventServiceAPI.query({start: timestamp, end: timestamp + 3*24*60*60});
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data, 'event.startHour') :
$scope.data;

$defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}, $scope: { $data: $scope.data }
});

$scope.$watch('groupby', function(value){
$scope.tableParams.settings().groupBy = value;
console.log('Scope Value', $scope.groupby);
console.log('Watch value', this.last);
console.log('new table',$scope.tableParams);
$scope.tableParams.reload();
});

$scope.$watch('data', function(value){
$scope.tableParams.settings().groupBy = value;
console.log('Scope Value', $scope.groupby);
console.log('Watch value', this.last);
console.log('new table',$scope.tableParams);
$scope.tableParams.reload();
});

}

Answer Source

I know this is too late, but I thought better to comment on this for others who seeking for a answer for the same issue.

I also had the same issue and managed to fix by following the example in following URL.

https://github.com/esvit/ng-table/blob/master/src/scripts/04-controller.js

I just added the following code line into my code after 'ngTableParams' instance creation.

$scope.params.settings().$scope = $scope;