Convert Promise object to JSON in Angular 2

Question

I'm trying to make an HTTP POST and then check the response to see if it fails or succeeds.

The HTTP call looks like this :

doLogin(credentials) {
    var header = new Headers();
    header.append('Content-Type', 'application/x-www-form-urlencoded');
    var body = 'username=' + credentials.username + '&password=' + credentials.password;
    return new Promise((resolve, reject) => {
        this.http.post(this.url, body, {
            headers: header
        })
            .subscribe(
                data => {
                    resolve(data.json());
                },
                error => {
                    resolve(error.json());
                }
            );
    });

}

And the call of this function is the following :

data: Object;
errorMessage: Object;

login($event, username, password) {
    this.credentials = {
        username: username,
        password: password
    };

    this._loginService.doLogin(this.credentials).then(
        result => {
            this.data = result;
            console.log(this.data);
        },
        error => {
            this.errorMessage = <any>error;
            console.log(this.errorMessage);
        });
}

On Chrome console, the data is the following :

Object {status: "Login success", token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjcmlzdGkiLCJ1c2VyS…blf1AzZ6KzRWQFNGXCrIeUHRG3Wrk7ZfCou135WmbVa15iYTA"}

How can I access the status in Angular 2? Because if I'm trying to access this.data.status, it's not working.

Should I create a class with the status and token properties?

Answer 1

To answer your question, you can use the response.okboolean that's available in the subscription of the observable from the http.

So based on your code you could pass the data object straight to the promise and inspect data.ok before parsing the data.json.

//...
return new Promise((resolve, reject) => {
    this.http.post(this.url, body, {
        headers: header
    })
        .subscribe(resolve,
         error => {
                reject(error.json());
            }
        );
});

// then you would have something like this:

this._loginService.doLogin(this.credentials).then(
    result => {
        if (result.ok) {
            this.data = result;
            console.log(this.data);
        }
    },
    error => {
        this.errorMessage = <any>error;
        console.log(this.errorMessage);
    })

SUGGESTION

Now, I would recommend getting rid of the promise, as I believe you don't really need it. whoever is consuming your service can just subscribe to the observable returned by the http post, like so:

doLogin(credentials) {
    let header = new Headers();
    header.append('Content-Type', 'application/x-www-form-urlencoded');
    var body = 'username='+credentials.username+'&password='+credentials.password;
    return this.http.post(this.url, body, { headers: header });
}

Then, when logging in:

login($event, username, password) {
    this.credentials = {
        username: username,
        password: password
    };

    this._loginService.doLogin(this.credentials).subscribe(response => {
        if (response.ok) { // <== CHECK Response status
            this.data = response.json();
            console.log(this.data);
        } else {
            // handle bad request
        }
    },
    error => {
        this.errorMessage = <any>error;
        console.log(this.errorMessage);
    });
}

Hope this helps!