AngularJs access scope variable in another function

Question

I am new to AngularJS and have this following piece of code that I need to edit.

 scope.findData = [];
 scope.clientId;
 scope.identityDocuments_a = [];


scope.getClientIdentityDocuments_a = function(clientID){  
        resourceFactory.clientResource.getAllClientDocuments({clientId: clientID, anotherresource: 'identifiers'}, function(data){
                scope.identityDocuments_a = data;
            });            
        };

        scope.findOptions = function(value){
            var i;
            var deferred = $q.defer();
resourceFactory.clientResource.getAllClientsWithoutLimit({displayName: value, orderBy : 'id', officeId : scope.group.officeId, sortOrder : 'ASC', orphansOnly : true}, function (data) {
                deferred.resolve(data.pageItems);
                  for (i = 0; i <= data.pageItems.length; i++) {

                 scope.clientId = data.pageItems[i].id;
                 scope.getClientIdentityDocuments_a(scope.clientId);
                    //<- I want to access scope.identityDocuments_a here
                }
                scope.findData = data.pageItems;

              });
            return deferred.promise;
        };

Both these functions are under the same controller. I looked at Accessing $scope variable from another method in the same controller Angularjs but it doesn't seem to work. Where am I going wrong? Thanks in advance.

Which variable are you not able to access? The clientID in getClientIdentityDocuments_a()? If that's the problem, try clientId: scope.clientID — Beartums
– Beartums, Commented Jan 30, 2016 at 5:57
I am unable to access scope.identityDocuments_a. I tried alert(scope.identityDocuments_a.toSource()); and it just showed [] — coderGeek
– coderGeek, Commented Jan 30, 2016 at 5:59

Beartums · Accepted Answer · 2016-01-30 06:43:09Z

1

Okay, I see the problem. Your getClientIdentityDocuments_a() is using a callback function. THe asynchronous data retrieval happens seperately and so the value is not set by the time you want to use it. You can fix this by returning a promise

scope.getClientIdentityDocuments_a = function(clientID){
        var defer = $q.defer();  
        resourceFactory.clientResource.getAllClientDocuments(
                  {clientId: clientID, 
                   anotherresource: 'identifiers'}, function(data){
                scope.identityDocuments_a = data;
                defer.resolve(data);
            });            
            return defer.promise;
        };

and then, to use the data in your second function:

scope.getClientIdentityDocuments_a(scope.clientId).then(function(documents) {
       // at this point, the scope.identityDocuments_a should be available,
       // but you could just set it here, since the document variable is
       // returning the same thing
    console.dir(scope.identityDocuments_a) // should have the returned data
    console.dir(documents)                 // should be the same as above
});
// Here, the documents will NOT be available, because this executes before
// the promise is resolved
console.dir(scope.identityDocuments_a) // [] or undefined

UPDATE: To clarify, if in getClientIdentityDocuments_a you were to directly assign the variable, such as

scope.getClientIdentityDocuments_a = function(clientID){
        scope.identityDocuments_a = some_document;
};

You would not need the promise and your code would work. But since you are retrieving the data from an asynchronous source, your second function is trying to use the data before the value has been set.

edited Jan 30, 2016 at 6:43

answered Jan 30, 2016 at 6:11

Beartums

1,3501 gold badge10 silver badges15 bronze badges

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

7 Comments

coderGeek Over a year ago

Hi. thanks for your answer. But I don't quite follow what is scope.getClientIdentityDocuments_a(scope.clientId).then(function(document) { }); for?

Beartums Over a year ago

I've turned the getClientIdentityDocuments_a() function into a promise that only resolves after the asynchronous call which updates the identityDocuments_a variable is completed. If you do anything with the variable before the asynchronous call has returned its data, the variable will be unchanged. the .then() syntax can be used with any promise in lieu of callback syntax, and it just waits until told the promise is resolved (in this case by the defer.resolve()) before it executes.

coderGeek Over a year ago

I have tried your code but unfortunately, it doesn't work. I tried alert(scope.identityDocuments_a.toSource()); before the return statement and it showed [].

Beartums Over a year ago

Yes, it would show that, because the value has not yet been returned from the resource. When working with asynchronous retrievals, the code continues chugging away while the retrieval is happening. The return defer.promise; is happening immediately after kicking off the data retrieval, before the data has been set. Is there any chance you can give me enough code that I can create a working fiddle?

Beartums Over a year ago

@coderGeek, I made more edits to the answer. Does any of that help? Do you know how promises and asynchronous calls work?

|

Collectives™ on Stack Overflow

AngularJs access scope variable in another function

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related