Updating angular $scope variable inside forEach loop

Harijs Deksnis

I have a quite extensive filter/faceted search application. Data are loaded via an API, and then displayed on the page using a ng-repeat. There's also a google map instance which has a marker associated with every item. So the application is quite demanding in terms of computation. I guess I might be overloading some clients with weaker machines in the end.

That's enough of background. I have got it working the way I want. Now I'm looking for performance gains and more effective ways to accomplish my goals.

Now I'm trying to figure out whether it is better to update a $scope variable (which is an array) inside a forEach loop, or update a private array and then update the $scope variable after the loop?

So this

$scope.myArrayWithAllTheItems = [];
$scope.myArrayWithItemKeysToBeDisplayed = [];

$http({method: 'GET', url: '/MYAPIURL'}).success(function(data, status, headers, config) {

if (angular.isArray(data)) {

    angular.forEach(data, function (item, key) {

        /* 
            some prework on item object here
        */

        //update scope variable with every forEach iteration
        $scope.myArrayWithAllTheItems.push({
            /*
            BIG OBJECT WITH MY DATA
                foo : bar,
                etc...
            */
        });

        //I store keys of the items that will be displayed on the page at any one moment
        //Changing filter controls will alter this array, not the big one containg all the data
        $scope.myArrayWithItemKeysToBeDisplayed.push(key);                    

    });


} else {
    //display error...
}

}).error(function(data, status, headers, config) {
    //display error...
});

versus this (I removed the comments and else branches, but otherwise the bit is identical except for 2 private arrays):

$scope.myArrayWithAllTheItems = [];
$scope.myArrayWithItemKeysToBeDisplayed = [];

$http({method: 'GET', url: '/MYAPIURL'}).success(function(data, status, headers, config) {

    if (angular.isArray(data)) {

        //private array variables to be update during the loop
        var _myArrayWithAllTheItems = [],
            _myArrayWithItemKeysToBeDisplayed =[];

        angular.forEach(data, function (item, key) {

            _myArrayWithAllTheItems.push({
            });

            _myArrayWithItemKeysToBeDisplayed.push(key);                    

        });

        //now update $scope variables only after the loop
        $scope.myArrayWithAllTheItems = _myArrayWithAllTheItems;
        $scope.myArrayWithItemKeysToBeDisplayed = _myArrayWithItemKeysToBeDisplayed;


    }
});
bmleite

It's exactly the same!

Changing a $scope variable will not immediately force a UI/DOM rendering. The actual render will only occur when angular's $digest() is called. So, unless you are forcing a $digest() somewhere on your forEach stack, no render will occur until the end of the loop, making both options (basically) equivalent in terms of performance.

Check this explanation on how data binding works on AngularJS.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Perl foreach loop variable scope

Angular $scope variable not updating

Passing a variable to a request-promise function inside a forEach loop

Blade: Undefined Variable Inside Foreach Loop

angular scope not updating in watcher

Updating variable in Foreach

Change value of a variable inside foreach loop? Make it available outside the loop

Variable scope inside for loop (imaplib library documentation)

Variable not updating inside the view

Variable scope: failed to print inside a for loop

Clear a variable counter inside forEach loop?

Scope of variable declared inside a for loop

Angular JS how to update scope variable inside another scope variable

AngularJS : variable of ng-repeat loop not updating $scope fast enough

$watch not updating scope variable

Scope of variable inside for loop

Updating a variable inside Service

Angular updating $scope variable after ajax is not reflecting in UI

Javascript Scope: variable declared inside as opposed to outside of a forEach loop

Variable scope inside forEach

Loop variable is not updated inside function in angular

how to access an outside variable inside a forEach loop

SwiftUI not updating state variable in ForEach loop function call

updating a variable value in global scope from inside the closure

Increment and Reset a count variable inside a foreach loop

Angular - Variable is not updating on view inside two nested loops

Updating a variable inside the for loop is not working

Undefined variable: sub inside the foreach loop in laravel

How to delay updating View elements inside a ForEach loop?