Variable scope issue with AngularJS

Question

I have a really weird issue with my javascript page :

    $scope.ptfs = new Array();

    $http.get('trades.json').success(function(data) {
            data.portfolios.forEach(function(p){
                $scope.ptfs.push(new Portfolio(p.id , p.name));

                $scope.message3 = $scope.ptfs[0];

            })
    })

    $scope.message2 = $scope.ptfs;
    $scope.message4 = $scope.ptfs[0];

And the HTML :

2 : {{message2}}<br>
3 : {{message3}}<br>
4 : {{message4}}<br>

The result i got is : 2 : [{"id":0,"name":"CAN REAL","trades":[]},{"id":1,"name":"INVESTOPEDIA","trades":[]}] 3 : {"id":0,"name":"CAN REAL","trades":[]} 4 :

Any idea why : - $scope.message3 = $scope.ptfs[0]; AND - $scope.message4 = $scope.ptfs[0];

doesn't return the same result ?

Thanks, Nicolas

What if you try setting the scope variables inside the success function? I bet this is an async issue. — bencripps
– bencripps, Commented Aug 22, 2014 at 18:40

apairet · Accepted Answer · 2014-08-22 18:41:10Z

2

The issue you encounter is due to the asynchronous nature of your code. $scope.message4 = $scope.ptfs[0]; is executed before items get pushed to $scope.ptfs. At the time of assigning message4, your array is empty.

$http.get('trades.json') returns a promise. Once that promise is resolved, ie. once the server responds to your request, the callback of the then function is executed $scope.ptfs is populated.

answered Aug 22, 2014 at 18:41

apairet

3,16224 silver badges24 bronze badges

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

2 Comments

user3798845 Over a year ago

thanks.Any way to go around that ? Except to put all the code inside the .success ?

apairet Over a year ago

It all depends on what you want to achieve. You can force to delay the instantiation of your controller until the data requested to the server is available. This can be achieve using resolve in ngRoute of uiRouter.

Collectives™ on Stack Overflow

Variable scope issue with AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related