Angular 5 / Typescript/RxJS - get data from Observable

Question

I have this typescript method in order to login user:

onSubmit() {
    if (this.form.valid) {
      this.authService.login(this.form.value).map(res => this.loginResponse = res.json).subscribe(
        success => {
          console.log('Response: ' + this.loginResponse);
        },
        error => {
          this.loginFailed = true;
          setTimeout(()=>{   
            this.loginFailed  = false;
          }, 3000);
          console.error('ERROR login.component: ' + error);
        }
      );     
    }
    this.formSubmitAttempt = true;            
  }

and actually I don't know how to get the response data inhere .map(res => this.loginResponse = res)

The output of console.log is:

Response: function () {
    if (typeof this._body === 'string') {
        return JSON.parse(/** @type {?} */ (this._body));
    }
    if (this._body instanceof ArrayBuffer) {
        return JSON.parse(this.text());
    }
    return this._body;
}

Does anyone have any hint how I get the response object with observables.

success => { console.log('Response: ' + success); },

klonq
– klonq

2018-02-20 15:11:48 +00:00
Commented Feb 20, 2018 at 15:11 — klonq
– klonq, Commented Feb 20, 2018 at 15:11

The Segfault · Accepted Answer · 2018-02-20 15:33:02Z

1

If you are on Angular5 with HttpClient instead of Http then I think you might be able to just remove .map and do this:

onSubmit() {
    if (this.form.valid) {
        this.authService.login(this.form.value)
            .subscribe(
                success => {
                    this.loginResponse = success;
                    console.log('Response: ' + success);
                },
                error => {
                    this.loginFailed = true;
                    setTimeout(() => {
                        this.loginFailed = false;
                    }, 3000);
                    console.error('ERROR login.component: ' + error);
                }
            );
    }
    this.formSubmitAttempt = true;
}

answered Feb 20, 2018 at 15:33

The Segfault

1,0501 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2018-02-20 15:34:06Z

1

Try that

this.authService.login(this.form.value).map(res => res.json()).subscribe(
    resp => {
     this.loginResponse = resp;
      console.log('Response: ' + this.loginResponse);
    },
    error=> //...

If using angular 5, you should use HttpClient instead of the deprecated Http class. That way, you won't even need to call

.map (res=>res.json())

as httpClient automatically converts the response to json format by default

answered Feb 20, 2018 at 15:34

David

34.6k13 gold badges90 silver badges124 bronze badges

Comments

Mixalloff · Accepted Answer · 2018-02-20 15:11:58Z

0

response.json is a function. You need to call them

...map( res => this.loginResponse = res.json() )

answered Feb 20, 2018 at 15:11

Mixalloff

8374 silver badges10 bronze badges

2 Comments

alsami Over a year ago

res.json() is deprecated with the latest HttpClient and no longer available when using angular 5. stackoverflow.com/questions/46630893/…

Mixalloff Over a year ago

Yes, json received by default in angular 5

Collectives™ on Stack Overflow

Angular 5 / Typescript/RxJS - get data from Observable

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related