Angular access data outside subcribe

Question

How can we access the data that is outside the subscription in angular ? . I wanted to get and use the result outside.

user component ts

submit(): void {
    const request = this.UserService
      .getUser()
      .subscribe((result) => {
        this.permissions = result[0].permissions
      });

    //I need to access the data here , permissions should not be empty 
    console.log("this.permissions" , this.permissions)

  }

Service

  getUser(): Observable<User[]> {
    return from(this.feathers.service('users').find<User>({ query : { identityId : 8895}}))
    .pipe(
      map((result) => result.data)
    );
  }

wrap submit function in `asyn/await`. This will solve your issue — Abdul Basit, Apr 26 '20 at 08:32
Does this answer your question? [Angular 2+ wait for subscribe to finish to update/access variable](https://stackoverflow.com/questions/50951779/angular-2-wait-for-subscribe-to-finish-to-update-access-variable) — smithnblack, Apr 26 '20 at 08:41

Naren Murali · Answer 1 · 2020-04-26T08:38:47.127

2

The observable with the subscribe is a async task, while the console.log is syncronous. So console.log will run before the subscribe completes, hence you are getting no value, after which when the http observable completes we will have the subscribe running, only then we will have data available on permissions. Modify the code as below.

submit(): void {
    const request = this.UserService
      .getUser()
      .subscribe((result) => {
        this.permissions = result[0].permissions;
        //I need to access the data here , permissions should not be empty 
        console.log("this.permissions" , this.permissions)
      });
}

References.

Event loop

edited Apr 26 '20 at 08:38

answered Apr 26 '20 at 08:32

Naren Murali

19,250
3
27
54

„ So console.log will skip the subscribe and run“ - it is not going to be skipped, but not completed at the moment when the `console.log` is called, because of async call. – smithnblack Apr 26 '20 at 08:36
1

@smithnblack modified, is this fine? – Naren Murali Apr 26 '20 at 08:39
:-) great, just trying to be sure we are not giving wrong informations ;-) – smithnblack Apr 26 '20 at 08:40
@smithnblack 100% agree, made a mistake, thanks for helping! – Naren Murali Apr 26 '20 at 08:42
@NarenMurali this is not the answer – Apr 26 '20 at 10:07

score 0 · Answer 2 · answered Apr 26 '20 at 09:36

Here issue is that Observable is not waiting for the response from service call and proceeding to execute the console statement.That's why the value printed through console statement is not the response what you are expecting .

Two solutions are there for this :

1) You can access this.permissions value through out your user component inside any other method once value is set to this variable . Try using this variable inside another method which is getting called after this execution completes .

2) Using async and await and returning Promise object instead of Observable . Then execution will happen in sequence and console statement will get executed only after response is fetched .

user component ts

async submit(): void {
    const request = await this.UserService
      .getUser()
      .then((result) => {
        this.permissions = result[0].permissions
      });

    //I need to access the data here , permissions should not be empty 
    console.log("this.permissions" , this.permissions)

  }

Service

return new Promise((resolve, reject) => {
      from(this.feathers.service('users').find<User>({ query : { identityId : 8895}})).subscribe(response => {
        resolve(response);
      }, reject);
    });

Angular access data outside subcribe

user component ts

Service

2 Answers2