Variable scope in Javascropt

Question

I'm having problems with variable scope in javascript. I have the following code that works fine except that the value of this.myUser becames undefined when it goes out of the .subscribe(...) block. I don't understand why since it's a class varibale. Here's my code:

private myUser: User;

      login(username: string, password: string): User {

          this.http.get(this.loginUrl + '?username=' + username + '&password=' + password)
            .map((response : Response) => response.json())
            .subscribe(data => {
                console.log('data inside', data);
                this.myUser = data;
                console.log('user inside', this.myUser);
              }
            );

          console.log('user outside', this.myUser);

          return this.myUser;

      }

And here's the result from console log:

I'm using angular 4 with bootstrap 4 (but I don't think that has any influence on the issue). Thanks for any hint.

Edit I red the link below, so I tried to add promise to my code to manage async calls. Online tutorials seems all very simple (too simple indeed, included the Angular official reference), so I ended up with something like this:

this.http.get(this.loginUrl + '?username=' + username + '&password=' + password)
      .toPromise()
      .then(data => {
            console.log('data inside', data);
            this.myUser = data.json() as User;
            console.log('user inside', this.myUser);
          })
      .catch(console.log.bind('Error!'));

But it doesn't have any effect on the application flow. I'll keep trying, but any help will be appreciated.

score 0 · Answer 1 · answered Aug 04 '17 at 08:55

If you made this changes.

private myUser: User;

login(username: string, password: string) = () : User =>  {

  this.http.get(this.loginUrl + '?username=' + username + '&password=' + password)
  .map((response : Response) => response.json())
  .subscribe(data => {
    console.log('data inside', data);
    this.myUser = data;
    console.log('user inside', this.myUser);
  }
  );

  console.log('user outside', this.myUser);

  return this.myUser;
}

The caller of the login function will have no scoped object. Using an arrow function in typescript will persist the this/instance using a local variable to reference the containing class of your function.

I tried your solution, but it seems to jump completely the `this.http.get(...)` function because it only logs the last statement. — esseara, Aug 04 '17 at 09:47

score 0 · Answer 2 · answered Aug 04 '17 at 09:02

0

The issue is, that the observable is not completed when you hit this line:

console.log('user outside', this.myUser);

Observables are asynchronous. The subscribe block will only be executed after the AJAX call (this.http.get) has succeeded. The console.log statement will be executed right after the observable has been created.

answered Aug 04 '17 at 09:02

david

859
1
13
23

This question is already marked as a possible duplicate, it doesn't need an answer unless you feel it's not a duplicate ;) – AT82 Aug 04 '17 at 09:05

Variable scope in Javascropt

2 Answers2