Angular: Promise updating array but integer remains static

Question

Angular: Promise updating array but integer remains static

At the moment, I have a factory and a controller set up. The factory is responsible for updating with items retrieved from an endpoint along with the total number of pages of data. While my data array seems to be working properly, the pageCount (an integer) doesn't seem to update at all. I have double-checked to ensure that it is not returning a value of 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);
                // I also attempted 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 still displays the initial value
<div ng-repeat="item in data">{{item}}</div> // This section is functioning correctly

javascript angularjs promise angular-promise

Answer 1

Answer №1

By implementing the update() function in the promise object, you are able to utilize the then method to manage the outcome more effectively, ensuring a more uniform 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;
    });
});

Answer 2

By implementing the update() function in the promise object, you are able to utilize the then method to manage the outcome more effectively, ensuring a more uniform 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;
    });
});

Answer 3

Answer №2

When you set the primitive value from the service, the reference was lost. To avoid this issue, consider fetching the pageCount from a getter function in the service instead of directly setting it. Attempting to override the service value will result in a completely different value being stored in the scope.

This issue does not occur with arrays because they are stored as references and you made a copy of it.

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

Answer 4

When you set the primitive value from the service, the reference was lost. To avoid this issue, consider fetching the pageCount from a getter function in the service instead of directly setting it. Attempting to override the service value will result in a completely different value being stored in the scope.

This issue does not occur with arrays because they are stored as references and you made a copy of it.

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

Angular: Promise updating array but integer remains static

Answer №1

Answer №2

Similar questions

Ways to combine duplicate entries within a column using Ruby on Rails?

Unable to utilize the resolved value received from a promise and returned from it

AngularJS: A Step-By-Step Guide to Adding Two Values

Trouble with Next.js App Router OG Image not appearing after deployment

What limitations prevent me from using "await .getAttribute()" in Protractor, despite the fact that it does return a promise?

Error message: "Issue occurs when sending keys to protractor element's text value and

Script to pop up cancel alert box

Error: The function `push` cannot be used on the variable `result` (TypeError)

Encountering an issue while trying to import the instanceMethods function within Sequelize

Issue encountered with websocket connection while attempting to include dependencies

The overflow hidden function does not seem to be fully functional on the iPad

What is the proper way to transfer information to my ajax function from my controller?

Utilizing Google Maps API to update ImageMapType Overlay

Configuring Vuex State

Troubleshooting Firebase AppCheck v8 in React: Encountering a 400 error message stating "App ID is Invalid: 'undefined'"

Display webpage content in an Iframe using Javascript after PHP code has been executed

Tips for obtaining a cropped image as form data in React after the cropping process

Demystifying Iron Ajax: Unraveling the process of parsing an array of JSON objects from a successful

Creating a worldwide entity through the use of an Immediately Invoked Function Expression

Is there a way to split the text into distinct pages within a contenteditable area, similar to the functionality in Google Docs