ddd
ddd

Reputation: 5029

ngTable: Cannot read property "page"?

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

Answers (1)

Serhii
Serhii

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

Related Questions