CODEWITHSUNDEEP
javascriptangularjspromiseangular-promise
diplosaurus
diplosaurus

Reputation: 2588

Angular - array updating from promise, integer not updating

Currently I have a factory and a controller. The factory updates with items from an endpoint and the number of pages of data. My data array is being recognized fine, but my pageCount (int) update never actually changes. I have checked to make sure it isn't actually returning 0.

.factory('myService', function($http) {
    return {
        data: [],
        update: update,
        pageCount: 0
    };

    function update() {
        return $http.get('path/to/endpoint')
            .then(function(res) {
                angular.copy(res.data.itemsArray, this.data);
                angular.copy(res.data.pageCount, this.pageCount);
                // also tried this.pageCount = res.data.pageCount;
            }.bind(this));
    }
})

.controller('myCtrl', function(myService) {
    myService.update();

    $scope.data = myService.data;
    $scope.pageCount = myService.pageCount;
});

<div>{{pageCount}}</div> // This does not update at all
<div ng-repeat="item in data">{{item}}</div>  // This works fine

Upvotes: 0

Views: 331

Answers (2)

Davin Tryon
Davin Tryon

Reputation: 67316

You are returning a promise with the update() function so you can use then to handle the result (this will give a more consistent result):

.factory('myService', function($http) {

    return {
        update: update
    };

    function update() {
        return $http.get('path/to/endpoint')
            .then(function(res) {
                var result = {
                    data: [],
                    update: update,
                    pageCount: 0
                };

                result.data = res.data.itemsArray;
                result.pageCount = res.data.pageCount;
                return result;
            });
    }
})

.controller('myCtrl', function(myService) {

    $scope.data = [];  

    myService.update().then(function(result) {

        $scope.data = result.data;
        $scope.pageCount = result.pageCount;
    });
});

Upvotes: 1

Peter Ashwell
Peter Ashwell

Reputation: 4302

When you assign the primitive from the service, the reference was lost. Try fetching pageCount from a getter in the service instead. Trying to override the service value is a totally different value to the one in the scope.

It doesn't happen to the array because it's a reference and you used copy.

factory('myService', function($http) {
    var pc = 0;
    return {
        data: [],
        update: update,
        pageCount: function() {
            return pc;
        }
    };

    function update() {
        return $http.get('path/to/endpoint')
            .then(function(res) {
                angular.copy(res.data.itemsArray, this.data);
                pc = res.data.pageCount;
            }.bind(this));
    }
})

.controller('myCtrl', 

    function(myService) {
        myService.update();

        $scope.data = myService.data;
        $scope.pageCount = myService.pageCount;
    });

    <div>{{pageCount()}}</div> // This does not update at all
    <div ng-repeat="item in data">{{item}}</div>  // This works fine

Upvotes: 0

Related Questions