Search code examples
angularresteasyangular5

How can i set a simple string value returned from http.post to a variable in Angular5


I want to take a token from my Restful webservice with http.post. The webservice takes an username and password, if parameters match with any user in database it creates a token and return it as a string. I can send post and take the value as JSON but i want to take it as string. and i wanna use it as variable. And i want to have clear knowledge about http and rest service comunication if anyone can suggest a source it would be very nice to me. Thanks in advance...

i can take it with this but i wanna take it as a variable or a variable inside a class Interface :

export interface Token {
    token: string
}

auth.service.ts :

login (username: string, password: string): Observable<Token[]> {
      this.params = '?username=' + username + '&password=' + password;
      return this.http.post<Token[]>(this.loginURL + this.params, null, httpOptions).do(data => console.log(data));
  }

login.component.ts :

this.authService.login(this.username, this.password).subscribe(data => this.authService.token = data[0]);

UPDATED AND WORKING

I solved it with @SrAxi's help. The Final correct code;

my login.component.ts :

this.authService.login(this.username, this.password).subscribe(
            (data: string) => this.authService.token.token = data,
            (error: any) => console.error(error.message, error.details),() => console.log(this.authService.token.token)
        );

My auth.service.ts :

 login(username: string, password: string): Observable<string> {
        this.params = '?username=' + username + '&password=' + password;
        return this.http.post(this.loginURL + this.params, null, httpOptions)
            .map((response: Token) => response.token) // we navigate in the repsonse directly and fish out the token and return it
            .catch((error: any) => Observable.throw(error));
    }

and my object class :

export class Token {
    private _token: string;


    get token(): string {
        return this._token;
    }

    set token(value: string) {
        this._token = value;
    }
}

Solution

  • You are not mapping the response from your Http call.

    login(username: string, password: string): Observable<string> {
        this.params = '?username=' + username + '&password=' + password;
        return this.http.post(this.loginURL + this.params, null, httpOptions)
          .map((response: any) => response.json().token) // we navigate in the repsonse directly and fish out the token and return it
          .catch((error: any) => Observable.throw(error));
      }
    

    With this reworked function you'll be able to map the response and parse it as a JSON or to throw an error that your subscription will catch.

    So you could call it like this:

    this.authService.login(this.username, this.password).subscribe(
          (data: any) => this.authService.token = data[0],
          (error: any) => console.error(error.message, error.details)
        );