Pushing new value to an array still returns empty - AngularJS

Question

I have this block of codes in my controller..

controller('ChallengeCtrl',function($scope,$http){
    $scope.challenged = [];

    $scope.checkVideo = function (video) {
        var response;
        console.log(url);
        return $http.get(url).success(function(data) {
            return data;
        }).error(function(data){
            return data;
        });
    }

    $scope.challengeMe = function() {
        $scope.checkVideo($scope.selectedVideo).then(function(data){
            $scope.challenged = data.data;
            console.log($scope.challenged); //working
        });
    }

    $scope.printChallenge = function() {
        console.log($scope.challenged); //not working, returns [] null
    }
});

I assigned the value of $scope.challenged when i call challengeMe() function and I tried to console out the values inside $scope.challenged array on my printChallenge() function, but it returns to be null.

Try to close the `.then` with `});` not just `}`. It will throw an error if you will not end it properly. — Alberto I.N.J., Jul 10 '15 at 04:35
oh, a typo, its actually closed with `});` in my actual code. thank for pointing out.. — slverstone, Jul 10 '15 at 04:37
This entirely depends on when / where you call `printChallenge()`. It's always going to log an empty array until `challengeMe()` calls `checkVideo`, waits for the async resolution and re-assigns `$scope.challenged` — Phil, Jul 10 '15 at 04:40
Also, your `success` and `error` calls are mostly redundant. In fact, your `error` handler will make the error response look like a success in a promise chain. You might as well just leave it as `return $http.get(url);` — Phil, Jul 10 '15 at 04:43
the flow is I call `challengeMe()` then follows by `printChallenge()` — slverstone, Jul 10 '15 at 04:44
Try to log the `data` before the return and see if it's not empty. — Alberto I.N.J., Jul 10 '15 at 04:45
Thanks for quick response everyone :) The one who answered about `$scope.$apply` helped the problem. Seems he deleted his answer when I'm about to click it as correct answer. lol — slverstone, Jul 10 '15 at 04:51
Did you read the part in my comment where I said *"...waits for the async resolution..."*? — Phil, Jul 10 '15 at 04:53
possible duplicate of [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Phil, Jul 10 '15 at 04:53
@Phil im getting this error after I put `$scope.$apply()` `$digest already in progress` .. I'll read the link, thanks, this will be helpful. — slverstone, Jul 10 '15 at 04:58
@slverstone that's because `$scope.$apply()` is the wrong thing to do. — Phil, Jul 10 '15 at 05:05

score 1 · Answer 1 · answered Jul 10 '15 at 05:37

Assuming that you are calling challengeMe() and printChallenge() on page load, the problem is happening because challengeMe() has a async function call which populates data in $scope.challenged. While that async call is in progress you are executing your function ie printChallenge() with no time delay and since the call is not yet complete in challengeMe(), so $scope.challenged is not populated with any data.

To solve this problem you can either add a $timeoutor you can log your value the way you have done it in challengeMe()

score 0 · Answer 2 · answered Jul 10 '15 at 05:16

Since ChallengeMe() is an async function, you need a timer function before you call PrintChallenge() method so that you wait until the data populates (Which is a wrong way to do as generally we don't know after how much time we would be having the data populated) OR may be you can have a WHILE loop just after the ChallengeMe() call and just before the PrintChallenge()Call. In the WHILE loop you can check whether $scope.challenged is not NULL.

The console message inside the .then inside the ChallengeMe() method works because .then executes only after the AJAX call has finished. But by this time the execution must have moved further to the PrintChallenge() method without waiting for the Data and thus the console message inside the PrintChallenge() callhas nothing.

Pushing new value to an array still returns empty - AngularJS

2 Answers2