How to make nested Service calls in Angular2 using observables?

Question

Below are my component file and service file. What I want to do is that the after verification() service method on its success callback i.e., inside subscribe I want call another service method i.e., signup(). But, its not working showing me following error:

Previously in angular1 if i do this it would work but not here:

sampleService.meth1().success(function(){
            //statement1...
            sampleService.meth1().success(function(data){
            //statement2...
        }).error(function(){})
    }).error(function(){});
})

Signup.component.ts

import { Component, Input } from '@angular/core';
    import { Router } from '@angular/router';
    import {User} from '../shared/model/user';
    import {SignupService} from './signup.service';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/operator/debounceTime';
    import 'rxjs/add/operator/distinctUntilChanged';
    import 'rxjs/add/operator/switchMap';
    import 'rxjs/add/operator/toPromise';

    @Component({
        moduleId: module.id,
        selector: 'ym-signup',
        templateUrl: 'signup.component.html',
        styleUrls: ['signup.component.css'],
        providers: [SignupService]
    })

    export class SignupComponent {

        @Input()
        user = {};

        constructor(private router:Router, private signupService:SignupService) {
        }

        signup(selectedUser:User) {
            this.signupService.verification(selectedUser)
                .subscribe(data => {
                        swal({
                            title: 'Verify token sent on your Email.',
                            input: 'password',
                            inputAttributes: {
                                'maxlength': 10,
                                'autocapitalize': 'off',
                                'autocorrect': 'off'
                            }
                        }).then(function (password) {

                            this.signupService.signup(password)
                                .subscribe(data => {

                                        localStorage.setItem('user', JSON.stringify(data));
                                        this.router.navigate(['dashboard']);
                                    },
                                    error => alert(error));
                        })
                    },
                    error => alert(error));
        }


        goBack() {
            this.router.navigate(['login']);
        }
    }

Signup.service.ts

import {User} from '../shared/model/user';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';
import {Injectable} from '@angular/core';
import {Response} from "angular2/http";
import { Observable }     from 'rxjs/Observable';


@Injectable()
export class SignupService {

    private postUrl:string = '/api/users/signup';
    private verify:string = '/api/users/verify';
    constructor(private http:Http) {
    }

    verification(user:User):Observable<JSON> {
        let headers = new Headers({
            'Content-Type': 'application/json'
        });

        return this.http
            .post(this.verify, JSON.stringify(user), {headers: headers})
            .map(this.extractData)
            .catch(this.handleError);
    }

    signup(token:string):Observable<any> {
        let headers = new Headers({
            'Content-Type': 'application/json'
        });

        return this.http
            .post(this.postUrl, JSON.stringify({verificationToken:token}), {headers: headers})
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || { };
    }

    private handleError(error: any) {
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

}

Use arrow function instead of function

Paul Samsotha
– Paul Samsotha

2016-09-19 11:25:13 +00:00
Commented Sep 19, 2016 at 11:25 — Paul Samsotha
– Paul Samsotha, Commented Sep 19, 2016 at 11:25

martin · Accepted Answer · 2018-08-21 20:43:08Z

3

Judging by the error Cannot read property 'signup' of undefined it looks like you're calling signup() on a non-existing object.

And it's correct, you're creating the closure as .then(function (password) { ... }) which doesn't capture the surrounding context this and therefore is called with this = window which is not what you want obviously.

See: https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

So you can easily fix it with an arrow function:

.then(password => {
    this.signupService.signup(password)
        .subscribe(data => {
             localStorage.setItem('user', JSON.stringify(data));
             this.router.navigate(['dashboard']);
        }, error => alert(error));
})

edited Aug 21, 2018 at 20:43

answered Sep 19, 2016 at 11:35

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

2 Comments

Sumit Khanduri Over a year ago

thx it worked I was not expecting that sweetalert was causing the problem. One more thing if you can help after the verification() success I want to prompt user for input and then put that input in signup() method before calling.

martin Over a year ago

Well, most easily before calling this.signupService.signup(password)... ask the user for credentials with JavaScript's standard prompt() function that shows a popup window. See w3schools.com/jsref/met_win_prompt.asp Then use the value in signup() method

toskv · Accepted Answer · 2016-09-19 11:30:57Z

In the signup method you are giving a function as the callback for then. You should as arrow function instead to keep the same context.

 signup(selectedUser:User) {
            this.signupService.verification(selectedUser)
                .subscribe(data => {
                        swal({
                            title: 'Verify token sent on your Email.',
                            input: 'password',
                            inputAttributes: {
                                'maxlength': 10,
                                'autocapitalize': 'off',
                                'autocorrect': 'off'
                            }
                        }).then(password => {

                            this.signupService.signup(password)
                                .subscribe(data => {

                                        localStorage.setItem('user', JSON.stringify(data));
                                        this.router.navigate(['dashboard']);
                                    },
                                    error => alert(error));
                        })
                    },
                    error => alert(error));
        }

Rakesh · Accepted Answer · 2016-11-14 01:00:49Z

-2

Use Observable.forkJoin() to run multiple concurrent http.get() requests. The entire operation will result in an error state if any single request fails. Please find the snippet usage below :



getBooksAndMovies() {
        Observable.forkJoin(
            this.http.get('/app/books.json').map((res: Response) => res.json()),
            this.http.get('/app/movies.json').map((res: Response) => res.json())
        ).subscribe(
            data => {
                this.books = data[0]
                this.movies = data[1]
            },
            err => console.error(err)
        );

answered Nov 14, 2016 at 1:00

Rakesh

12 bronze badges

Collectives™ on Stack Overflow

How to make nested Service calls in Angular2 using observables?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related