Wait for an object response in Angular 9

Question

It's my first time posting here so I first apologize if I'm doing something wrong.

I'm so new in Angular and I've never used synchronism, so please make it as simple as possible.

I have this function in my service:

 validateDDBB(userName, teamName, email: string) {
    let requestUrl: string = '/api/tenniship/validator/user?userName=' + userName + '&teamName=' + teamName + '&email=' + email;
    const config = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
    return this.http.get<Array<boolean>>(requestUrl, config);
  }

I want it for a Sign Up form. I want to know if an email, username and a teamName are already registered in my database. This function sends me a boolean array of size = 3 which indicates if they already are or not.

The problem is that the code running does not wait for the response, so the results obtained use garbage data.

My component function:

databaseValidator(){
    this.loginService.validateDDBB(this.username, this.teamName, this.email).subscribe(
      res => {
        this.usedUsername = res[0].valueOf();
        this.usedTeamName = res[1].valueOf();
        this.usedEmail = res[2].valueOf();
        console.log("Data base info pulled: " + res);
        return true;
      },
    error => {
      console.error("Something went wrong: undefined: " + error);
      return false;
    }
    );
  }

How can I modify my code so, for example, when I do this my code will wait for the response so I do not use garbage data?

onSubmit(){
    this.databaseValidator();
    //usedUsername, usedTeamName and usedMail are primitive boolean variables.
    console.log("Username: " + this.usedUsername);
    console.log("Team: " + this.usedTeamName);
    console.log("email: " + this.usedEmail);
}

Thanks lots!

What do you mean results obtained use garbage data? What's your problem right now? — Tzimpo
– Tzimpo, Commented Mar 27, 2020 at 19:44
If i dont initialice those three booleans variables, when I submit the first time the console.log shows they are 'undefined'. If a press submit button again, if the httpresponse has arrived, they show the previous values instead of the news. — arialdev
– arialdev, Commented Mar 27, 2020 at 19:52
Hi , @Varo412 have you check my answer if it working for you ? — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Apr 3, 2020 at 7:29
@Tzimpo I'm sorry, I read rules say I shouldn't say thank you. Yes, you saved me. It worked great and now my project goes on :D THANK YOU! — arialdev
– arialdev, Commented Apr 6, 2020 at 13:33

Muhammed Albarmavi · Accepted Answer · 2020-03-27 20:09:25Z

databaseValidator method will immediately then the console mesages will print later the loginService will be complated , there are some option to solve your problem like pass a callback , return an observable or promise

this how you can do it by return a promise

databaseValidator() : Promise<any> {
   return new Promise((resolve, reject) => {
    this.loginService.validateDDBB(this.username, this.teamName, this.email).subscribe(
      res => {
        this.usedUsername = res[0].valueOf();
        this.usedTeamName = res[1].valueOf();
        this.usedEmail = res[2].valueOf();
        console.log("Data base info pulled: " + res);
        resolve()
      },
    error => {
      console.error("Something went wrong: undefined: " + error);
      reject()
    }
    );
  }

onSubmit(){
    this.databaseValidator().then(()=>{

    console.log("Username: " + this.usedUsername);
    console.log("Team: " + this.usedTeamName);
    console.log("email: " + this.usedEmail);
    })  
}

because databaseValidator return a promise we can use async/await

async onSubmit(){
    await this.databaseValidator();

    console.log("Username: " + this.usedUsername);
    console.log("Team: " + this.usedTeamName);
    console.log("email: " + this.usedEmail); 
}

Collectives™ on Stack Overflow

Wait for an object response in Angular 9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related