Reputation: 5029
I am trying to implement ngTable to display json from rest call. In my factory js, I defined the method for the http get request to obtain all records in this case.
ristoreApp.factory("fmFactory", ['$http', '$window',
function ($http, $window) {
var service = {};
service.getAll = function () {
var url = SERVER + "/ristore/foundation/";
return $http({
headers: {'Authorization': 'Bearer ' + $window.localStorage.getItem("access_token")},
url: url,
method: 'GET',
crossOrigin: true
})
}
return service;
}]);
ngTable is set up in my controller js
ristoreApp.controller("fmCtrl",
['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
$scope.selection = '0';
$scope.reports = [];
$scope.fmSearch = function () {
if ($scope.selection == '0') {
fmFactory.getAll().success(function (data) {
$scope.reports = data;
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.reports.length, // length of data
getData: function ($defer, params) {
$defer.resolve($scope.reports.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
})
}
}
}]
)
Nothing fancy, just simple pagination with 10 records per page. However, I got error TypeError: Cannot read property 'page' of undefined
for the method params.page()
in $defer.resolve()
. This is very strange. Apparently 'page' is defined in the parameter section of NgTableParams
. Why does it complain it is not defined?
EDIT:
Based on the link from Sergii's answer I removed the $defer and changed my controller js to the following:
ristoreApp.controller("fmCtrl",
['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
$scope.selection = '0';
$scope.reports = [];
$scope.fmSearch = function () {
if ($scope.selection == '0') {
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
getData: function (params) {
return fmFactory.getAll().then(function(data) {
params.total(data.inlineCount);
return data;
});
}
});
}
}
}]
)
And yet nothing displayed but a bunch of lines. The http call url has been tested and returns correct promise using rest api tester.
Upvotes: 1
Views: 1541
Reputation: 7543
As I wrote in comment params is undefined, but exception was wrapped\processed by angular that is reason of partly correct exception information.
I believe this problem appears because of you are using newest ng-table-1.0.0 library for now. If you navigate to Angular ngTableDynamic example:server-side list or Angular ngTable example:server-side list please pay attantion that API to load data was changed.
getData: function(params) {
// ajax request to api
return yourFactory.get(params.url()).$promise.then(function(data) {
params.total(data.inlineCount);
return data.results;
});
}
In your parameter $defer also different object (object is params). If you'll try apply provided solution, please make sure that you changed correctly parameters:
params.url() - should be pagination filter like {page: 0, size: 10}
data.inlineCount - total elements on server side
data.results - data list from server side
I hope my investigation helped not only me to fix this problem.
Upvotes: 3