Angular Control Flow: return statement executed before function call finished

Question

Whenever I am calling the checkLoginData(email: string, password: string) method with some email and some password, the return statement is executed before the function call to getUsersAndCheck(email: string, password: string) is finished. This is a problem as my code depends on the function call to be finished in order to get a correct return statement. Here is my code:

import { Injectable } from '@angular/core';
//import { LOGINDATA } from '../mock-users'; // bad approach use mock back end
import { GetDbDataService} from '../get-db-data.service';
import { User } from '../user';
import { OnInit } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class CheckLoginDataService implements OnInit{
  //loginData = LOGINDATA;

  authentication: boolean = false;
  users: User[];
  constructor(private getDbDataService: GetDbDataService) { }

  ngOnInit(){
    this.getUsers();
    this.getUsersAndCheck("", ""); // call with empty strings to make compiler happy
    console.log("Initialized check-login-data.service");
  }

  getUsers(): void {
    console.log("getUsers() called");
    this.getDbDataService.getUsers()
      .subscribe(users => {this.users = users;
    this.logUsers();
    console.log("getUsers() call finished");
    });
  }

  logUsers(): void{
    this.users.forEach( (User) =>{
      console.log("id: " + User.id + " password: " + User.password);
    })
  }

  getUsersAndCheck(email: string, password: string){
    console.log("getUsers() called");
    this.getDbDataService.getUsers()
      .subscribe(users => {this.users = users;
    this.checkUserData(email, password);
    console.log("getUsers() call finished");
    });
  }

  checkUserData(email: string, password: string){
    this.authentication = false;

    this.users.forEach( (User) =>{ 
      if(email === User.id && password === User.password){
        this.authentication = true;
        console.log("got it!  authentication valie: " + this.authentication);
      }
    })
  }

  checkLoginData(email: string, password: string){
    this.getUsersAndCheck(email, password);
    console.log("return authentication valie: " + this.authentication);
    return this.authentication;
  }
}

Why does this happen? And how can I fix it?

Thank you really much in advance, I would be so lost without this communities help... Best regards, Sam

does this help? https://stackoverflow.com/questions/43953007/angular-2-wait-for-method-observable-to-complete — Turo, Feb 21 '20 at 17:36
It will return as the getUsersAndChack call is asynchronous. You can either follows Turo suggestion and use async and await or you can rearrange your methods a bit and get desired result — Barkha, Feb 21 '20 at 18:29

Nimitt Shah · Answer 1 · 2020-02-21T19:17:34.950

You need promise (subscribe) so that you can wait until the method returns something. Dont forget to return getUsersAndCheck method in checkLoginData method.

See the code below:

import { Injectable } from '@angular/core';
//import { LOGINDATA } from '../mock-users'; // bad approach use mock back end
import { GetDbDataService} from '../get-db-data.service';
import { User } from '../user';
import { OnInit } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class CheckLoginDataService implements OnInit{
  //loginData = LOGINDATA;

  authentication: boolean = false;
  users: User[];
  constructor(private getDbDataService: GetDbDataService) { }

  ngOnInit(){
    this.getUsers();
    this.getUsersAndCheck("", ""); // call with empty strings to make compiler happy
    console.log("Initialized check-login-data.service");
  }

  getUsers(): void {
    console.log("getUsers() called");
    this.getDbDataService.getUsers()
      .subscribe(users => {this.users = users;
    this.logUsers();
    console.log("getUsers() call finished");
    });
  }

  logUsers(): void{
    this.users.forEach( (User) =>{
      console.log("id: " + User.id + " password: " + User.password);
    })
  }

  getUsersAndCheck(email: string, password: string){
    console.log("getUsers() called");
    return this.getDbDataService.getUsers()
      .subscribe(users => {this.users = users;
          console.log("getUsers() call finished");
          return this.checkUserData(email, password);
    });
  }

  checkUserData(email: string, password: string){
    this.authentication = false;

    this.users.forEach( (User) =>{ 
      if(email === User.id && password === User.password){
        this.authentication = true;
        return this.authentication;
        console.log("got it!  authentication valie: " + this.authentication);
      }
    });
    return this.authentication;

  }

  // LOOK AT THE CHANGES IN BELOW METHOD
  checkLoginData(email: string, password: string){
    return this.getUsersAndCheck(email, password).subscribe(response => {
        console.log("return authentication valie: " + this.authentication);
        return this.authentication;
    });
  }
}

Angular Control Flow: return statement executed before function call finished

1 Answers1