Trying to update global variable in .map() function of observable

Question

I'm currently trying to update a global variable foundProfile inside a map() function. Now, I'm half realising that this may not be the way I should be doing things - but I can't figure out the reason nor can I think of any other way to set the variable to true if there's a match. Here's my current code:

export class LoginComponent implements OnInit {
    private usernameTxt: string;
    private passwordTxt: string;
    private foundProfile: boolean;

    constructor(private router: Router, private page: Page, private loginService: LoginService, private profileService: ProfileService) {
        page.actionBarHidden = true;
    }

    ngOnInit() {
        this.usernameTxt = 'someUsername';
        this.passwordTxt = 'SomePassword321!';
        this.foundProfile = false;
    }

    getProfile(username: string, password: string) {
        return this.loginService.getProfiles()
        .map(
            profiles => profiles.filter(
                (profile => {
                    if(profile.email == username && profile.password == password) {
                        this.foundProfile = true; //Set to true so we know a profile has been found
                        return profile;
                    }
                })
            )
        );
    }

    doLogin() {
        if(this.checkValues(this.usernameTxt, this.passwordTxt)) {
            this.profileService.profile = this.getProfile(this.usernameTxt, this.passwordTxt);
            console.log(this.foundProfile);
        }
    }
}

Now, my questions is as follows:

Why is this.foundProfile = true; inside the map() function not setting private foundProfile: boolean; to true? I'm sure I'm going about this the wrong way - but why is that the case and what should I be doing instead?

Thanks in advance.

edit: in my loginService, I'm initiating my observable like so:

getProfiles(): Observable<Profile[]> {
    return this.http.get<Profile[]>(this.url);
}

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Titian Cernicova-Dragomir, Feb 13 '18 at 14:21
Hi !! Maybe you just forget to use subscribe ? :p getProfile(username, password).subscribe() — Vincent Cueto, Feb 13 '18 at 14:26
@Vincent updated question with the call function. I wasn't aware that I should subscribe, because previously I've been told I don't need to if I want to return data. I've tried, though, and it didn't help. — Tienus McVinger, Feb 13 '18 at 14:34

Vincent Cueto · Answer 1 · 2018-02-13T14:52:49.727

If you want to update your foundProfile dont set it in .map if you want to process this you need a .subscribe() !

Another thing is that you try to put a promise into this.profileService.profile but you dont want the promise just the value after it's resolved.

The advantage of getProfile returning only a map is that you will be able to change/adapt the filter for each subscribe you need.

// Better to put this function in profile service then call this.profileService.getProfile
getProfile(username: string, password: string) {
  return this.loginService.getProfiles()
  .map((res: any) => {
    return res.json();
  });
}

doLogin() {
  if(this.checkValues(this.usernameTxt, this.passwordTxt)) {
    // removed this.profileService.profile = this.getProfile...
      this.getProfile(this.usernameTxt, this.passwordTxt).subscribe(
        (profiles) => profiles.filter(
          profile => {
              if(profile.email == username && profile.password == password) {
                  this.profileService.profile = true; // update your service value
                  this.foundProfile = true; //Set to true so we know a profile has been found
                  return profile;
              }
          })
      )          
      console.log(this.foundProfile);
  }
}

Thanks for the help. This doesn't work in my use case because you introduced a response of type any, whereas my code expects a response of type Profile[]. Problem is, though, if you don't typecast the response to any, you can't return it as json. (this is just how I'm understanding it btw, I hope I'm not talking nonsense haha) — Tienus McVinger, Feb 13 '18 at 15:15
Hope an expert come and help us ^^, maybe you can try with any just to see if it's working, then try to do it as type Profile[]. Follow the code step by step in debugger and see where you get an error. — Vincent Cueto, Feb 13 '18 at 15:26
well, both "work" in the sense that they're not returning an error. The problem is that if you typecast it to any, the filter doesn't do its job because it no longer knows what "profile.email" and "profile.password" are. This means that the whole if-condition will never be true and therefore it won't return the profile. Thank you again for trying to help though :) — Tienus McVinger, Feb 13 '18 at 15:42

Trying to update global variable in .map() function of observable

1 Answers1