AngularJS scope undefined

Question

In my ControllerA i have an init() function which loads these services:

init(){
childrenDataService.getData($scope.family_id).then(function(result) {
  $scope.childrenName = result;
  $scope.selectedChild = result[0];
})

console.log($scope);
console.log($scope.selectedChild)

//this doesn't work => TypeError: Cannot read property 'id' of undefined
//can't access $scope.selectedChild.id
additonalDataService.getData($scope.selectedChild.id).then(function(result){
  scope.additional = result;
})
}

The loading of ChildrenDataService is working fine. My Problem is that console.log($scope) gives me the full object. The attribute $scope.selectedChild is filled with an object.

But when I try to access this directly through console.log($scope.selectedChild) i get 'undefined'.

Why can't I access this directly? I need to access this because additonalDataService depends on the default selection of childrenDataService.

Thanks for your help

strelok2010 · Accepted Answer · 2016-04-08 09:45:12Z

2

In your case, when you try get $scope.selectedChild.id it's really undefined, because childrenDataService.getData doesn't completed. You can try fix this with:

init(){
childrenDataService.getData($scope.family_id).then(function(result) {
  $scope.childrenName = result;
  $scope.selectedChild = result[0];
  additonalDataService.getData($scope.selectedChild.id).then(function(result){
      $scope.additional = result;
  })
})

}

Update

If your services return promises, you can use promise-chaining:

childrenDataService.getData($scope.family_id).then(function(result) {
  $scope.childrenName = result;
  $scope.selectedChild = result[0];
  return additonalDataService.getData(id);
})
.then(function(result){
  $scope.additional = result;
})

edited Apr 8, 2016 at 9:45

answered Apr 8, 2016 at 9:28

strelok2010

1,2668 silver badges12 bronze badges

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

3 Comments

Timon Over a year ago

I tried this and it works, but the additonalDataService is depending on multiple variables. I shortend the example for here. Isnt there a more nice solution than to stage all the services in each other?

Groben Over a year ago

you can store all the promises in an array and use $q.all to execute code when all the promises are resolved

strelok2010 Over a year ago

"you can store all the promises in an array and use $q.all to execute code when all the promises are resolved" - but he need result of first resolved promise to create second promise, how it will works?

georgeawg · Accepted Answer · 2016-04-08 09:58:48Z

Isnt there a more nice solution than to stage all the services in each other?

You can use promise chaining.

var initPromise = init(){
    //return derived promise
    return (
        childrenDataService.getData($scope.family_id)
            .then(function(result) {
                $scope.childrenName = result;
                $scope.selectedChild = result[0];
                //return for chaining
                return ($scope.selectedChild);
             })
        ;
    );
};

Chain from the returned promise.

initPromise.then(function (selectedChild) {
    additonalDataService.getData(selectedChild.id)
        .then(function(result){
             scope.additional = result;
        })
    ;
});

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.¹

Odin · Accepted Answer · 2016-04-08 09:40:21Z

0

The problem you are facing is the callback function. the callback which means call me back later it gives result after everything is done processing.

Try and put everything within the callback function

Try this, it might help

init(){
childrenDataService.getData($scope.family_id).then(function(result) {
 $scope.childrenName = result;
 $scope.selectedChild = result[0];

console.log($scope);
console.log($scope.selectedChild)

//this doesn't work => TypeError: Cannot read property 'id' of undefined
//can't access $scope.selectedChild.id
additonalDataService.getData($scope.selectedChild.id).then(function(result){
  scope.additional = result;
  });
 })
}

edited Apr 8, 2016 at 9:40

answered Apr 8, 2016 at 9:34

Odin

1,0119 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS scope undefined

3 Answers 3

Update

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related