I was working on implementing pagination with this forked code plunker and everything was running smoothly. However, when I attempted to modify the code to fetch data from a Json file, it stopped functioning properly.
To see the code in action, please comment out lines: [13, 14, 15], and uncomment lines: [16 -> 37].
The issue seems to be related to the $filter function returning undefined when fetching data from a Json file. This leads me to believe that because the object is now a promise, it might be causing the $filter function to break, although I'm not entirely certain.
The error occurs within these two functions (when making the Json call):
$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], $scope.query)){
return true;
}
}
return false;
});
// take care of the sorting order
if ($scope.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
}
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
};
// calculate page in place
$scope.groupToPages = function () {
$scope.pagedItems = [];
for (var i = 0; i < $scope.filteredItems.length; i++) {
if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
} else {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
}
}
};
Error Message:
TypeError: Cannot read property 'length' of undefined
at Object.$scope.groupToPages (controllers.js:66:45)
at Object.$scope.search (controllers.js:61:12)
at new controllers.MainCtrl (controllers.js:99:10)
I would greatly appreciate any assistance. Thank you in advance.