Error when using Ui-bootstrap pagination with $http.get for api data

Question

I have pagination working here

But I want to change the data to use the API data I am creating however i am getting an error and I'm not sure why.

This is the error:

TypeError: Cannot read property 'then' of undefined

This is the code:

angular.module('cbuiRouterApp')
  .controller('BrowseCtrl', function ($scope, $http, socket) {
    $scope.itemData = [];
    $http.get('/api/items').success(function(itemData) {
      $scope.itemData = recipeData;
      socket.syncUpdates('Item', $scope.itemData);
    });


    $scope.predicate = '-created_at';

    $scope.totalItems = $scope.itemData.length;
    $scope.itemsPerPage = 21
    $scope.currentPage = 1;
    $scope.maxSize = 5;

    $scope.pageCount = function () {
      return Math.ceil($scope.itemData.length / $scope.itemsPerPage);
    };

    $scope.itemData.$promise.then(function () {
      $scope.totalItems = $scope.itemData.length;
      $scope.$watch('currentPage + itemsPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
          end = begin + $scope.itemsPerPage;

        $scope.filteredItems = $scope.itemData.slice(begin, end);
      });
    });
  });

rob · Accepted Answer · 2014-07-09 14:23:43Z

1

$http.get('/api/items') returns a promise but itemData does not have a promise so you can't call $promise.then on it. If you want that code to run after itemData loads why don't you just put it in the success callback. e.g.:

angular.module('cbuiRouterApp')
  .controller('BrowseCtrl', function ($scope, $http, socket) {
    $scope.itemData = [];
    $http.get('/api/items').success(function(itemData) {
      $scope.itemData = recipeData;
      socket.syncUpdates('Item', $scope.itemData);

      //Moved to here
      $scope.totalItems = $scope.itemData.length;
      $scope.$watch('currentPage + itemsPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
          end = begin + $scope.itemsPerPage;

        $scope.filteredItems = $scope.itemData.slice(begin, end);
      });

    });


    $scope.predicate = '-created_at';

    $scope.totalItems = $scope.itemData.length;
    $scope.itemsPerPage = 21
    $scope.currentPage = 1;
    $scope.maxSize = 5;

    $scope.pageCount = function () {
      return Math.ceil($scope.itemData.length / $scope.itemsPerPage);
    };
  });

answered Jul 9, 2014 at 14:23

rob

18.7k13 gold badges73 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daimz Over a year ago

Bang on the mark mate! That was exactly what the problem was, thanks for that!

gorpacrate · Accepted Answer · 2014-07-09 13:57:12Z

What is recipeData? At first you set $scope.itemData = [];, then after $http returns a value, you set $scope.itemData = recipeData;, which is undefined.

Surely, nor Array, nor undefined don't have $promise property.

Basically you're trying to do [].$promise.then() because you're doing it before $http is finished.

Not sure what you're trying to achieve..

Maybe something like

$http.get('/api/items').$promise.then(function (itemData) {
    $scope.itemData = itemData;
    socket.syncUpdates('Item', $scope.itemData);
    $scope.totalItems = $scope.itemData.length;
    $scope.$watchCollection('[currentPage, itemsPerPage]', function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
            end = begin + $scope.itemsPerPage;

        $scope.filteredItems = $scope.itemData.slice(begin, end);
    });
});

?

Collectives™ on Stack Overflow

Error when using Ui-bootstrap pagination with $http.get for api data

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related