AngularJS: I can't view the scope created in the get

Question

I've done two controllers:

One is a UsersCtrl where I do a $http.get() and I take all the users from a json. And when you click in on a User, you go in another page with another Controller (UsersDetailCtrl), where I've to use the $stateParams.id passed via the url, (that is ok) and check if there is an id which match in the $http.get.

I show you my UsersDetailCtrl and then I tell you my problem:

.controller('UsersDetailCtrl', function($scope, $http, $ionicModal, $window, $stateParams, $ionicLoading, $timeout) {
console.log($stateParams.id);
        $scope.loading = $ionicLoading.show({
          animation: 'fade-in',
          showDelay: 0,
          showBackdrop: true
    });
    var urlUtenti  = "users.json";
    $http.get(urlUtenti).success(function (response) {
        for (var i = 0; i < response.length; i++) {
            if (response[i].id == $stateParams.id) {
                $scope.user = response[i];
            }
          }
        $timeout(function(){
            $ionicLoading.hide();
        },1000);
        })
    console.log($scope.user);
})

Into the $http.get, precisely into the for clause, I have a $scope.user = response[i] where If I do a console.log(response[i]) or console.log($scope.user) INTO the for clause it's correct, I receive the Object that I want, BUT as you can see below, I've put the console.log($scope.user) in the end of the controller because I need to use that scope in the html view. The Result? undefined.

So why into the for clause it's all right and out of the http get it's not? How can I do to use the $scope.user in my html view?

P.S. I've already tried to make the scope an object and it return me a empty object.. same thing for the array. What is wrong with the scope?

Thanks.

try a "$scope.$apply()" after your "$scope.user = response[i];" — Karan Kumar, Apr 24 '15 at 06:34
Your `console.log($scope.user)` is outside the `$http.get` so it will happen before the request is resolved. See http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call. Also, why are you overwriting the `$scope.user` with each iteration of `response`? — Phil, Apr 24 '15 at 06:35
`Error: [$rootScope:inprog] $digest already in progress` already tried. :) — N4pst3r, Apr 24 '15 at 06:36
@KaranKumar no, that will most likely result in an error saying a digest cycle is already in progress. — Phil, Apr 24 '15 at 06:36
@Phil already tried to put into the `$http.get` the console and I'm not overwriting the scope because it is into a `if clause`. There is only one `ID` that correspond to the `$stateParams.id` — N4pst3r, Apr 24 '15 at 06:38
@LudovicoLoreti oops, I missed the `if`. Is there an actual problem? What you have should work fine. When the HTTP request is resolved and one of your responses matches the ID, `$scope.user` will be set which should be shown in any HTML views — Phil, Apr 24 '15 at 06:41
If you want to log the user record once it's been found, do it just after the `for` loop (before the `$timeout` call), eg `console.log('$scope.user', $scope.user)`. I'd also `break` after finding the user so you don't do needless iterations — Phil, Apr 24 '15 at 06:44

score 2 · Accepted Answer · edited May 23 '17 at 11:43

As @Phil commented, $scope.user is set just fine (if there is one matching $stateParams.id, that is) - your "problem" in the console.log($scope.user) logging undefined is that it is executed too early.

The flow goes like this:

$http.get(urlUtenti).success(successFunction) -> HTTP GET starts executing asynchronously
console.log($scope.user) (outside successFunction) -> executes immediately (successFunction hasn't yet been invoked, so $scope.user is undefined at this point)
HTTP GET returns successfully -> successFunction is executed and $scope.user is set.

Try this:

.controller('UsersDetailCtrl', function($scope, $http, $ionicModal, $window, $stateParams, $ionicLoading, $timeout) {
    console.log($stateParams.id);
    $scope.loading = $ionicLoading.show({
        animation: 'fade-in',
        showDelay: 0,
        showBackdrop: true
    });
    var urlUtenti  = "users.json";
    $http.get(urlUtenti).success(function (response) {
        for (var i = 0; i < response.length; i++) {
            if (response[i].id == $stateParams.id) {
                $scope.user = response[i];
            }
        }
        // console.log moved INSIDE the success function (before timeout)
        console.log($scope.user);
        $timeout(function(){
            $ionicLoading.hide();
        },1000);
    })
})

AngularJS: I can't view the scope created in the get

1 Answers1