Angular - array updating from promise, integer not updating

Question

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

@BenjaminGruenbaum, I don't think this a duplicate. The OP is binding this with bind(this). — Davin Tryon
– Davin Tryon, Commented Jan 28, 2015 at 8:07
@BenjaminGruenbaum could you add why it's a duplicate? My this assignments are working correctly for the array, but not for the primitive. I didn't see anything in your linked answer about that change. — diplosaurus
– diplosaurus, Commented Jan 28, 2015 at 8:10
@diplosaurus can you create a short fiddle (or plnkr) illustrating the issue? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jan 28, 2015 at 11:17

Davin Tryon · Accepted Answer · 2015-01-28 22:29:16Z

1

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;
    });
});

edited Jan 28, 2015 at 22:29

answered Jan 28, 2015 at 19:03

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

4 Comments

diplosaurus Over a year ago

Not to be pedantic but just so I understand correctly, should var obj be var result?

Davin Tryon Over a year ago

yes. edited. Thanks, I was half way through writing this answer this morning when the question was closed. Had to save it in a text file until now. :)

diplosaurus Over a year ago

I tried this out and got a Provider 'myService' must return a value from $get factory method. Presumably because factory needs to provide a return value. I tried both changing to a service and setting this.update equal to the function and also leaving it a factory and just returning an object with update: function() {...} - both of these things caused the browser to hang indefinitely. I'm wondering if the reference to update inside itself is causing an issue.

Davin Tryon Over a year ago

@diplosaurus Yes, you must return an object from a factory. I've made the edit to add back in expose the update method.

Peter Ashwell · Accepted Answer · 2015-01-28 08:13:13Z

0

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

edited Jan 28, 2015 at 8:13

answered Jan 28, 2015 at 8:05

Peter Ashwell

4,3022 gold badges20 silver badges22 bronze badges

3 Comments

diplosaurus Over a year ago

below the angular.copy in a comment I also tried that assignment with no luck.

Peter Ashwell Over a year ago

Hey, sorry figured it out. Try my last edit. Be careful using primitives in services

diplosaurus Over a year ago

Surprisingly didn't work... I tried putting it in a basic object structure and copying like the array. Seems odd that that wouldn't work either.

Collectives™ on Stack Overflow

Angular - array updating from promise, integer not updating

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related