Angular2: data.json is not a function

Question

I'm developing an application with angular2 as frontendI want to log in from the client side to the server side but when I try to pass the credentials I have these errors in the browser console .

In run time it complains with:

data.json is not a function

This is my service code:

import { Injectable } from '@angular/core';

import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class LoginService {
isAuthenticated: boolean = true;

  constructor(private http: Http) {

  }

  login(username: string, password: string) {
    const headers = new Headers();

    const creds = 'username=' + username + '&password=' + password;

    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));

    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    return new Promise((resolve) => {

      this.http.post('http://localhost:8080/StudentManager/login', creds, { headers: headers })

      .map( this.extractData )

      .subscribe(
          (data) => {
                     if(data.json().success) {
                window.localStorage.setItem('auth_key', data.json().token);
                console.log(username);
                this.isAuthenticated = true;
                    }
                resolve(this.isAuthenticated);
            });

    }
    );
  }

}

Here is a snapshot of the error:

El houcine bougarfaoui · Accepted Answer · 2017-03-17 16:17:22Z

3

data instead of data.json(), because you already mapped your data to json using extractData

  .subscribe(
      (data) => {
            if(data.success) {
               window.localStorage.setItem('auth_key', data.token);
               console.log(username);
               this.isAuthenticated = true;
            }
            resolve(this.isAuthenticated);
        });

answered Mar 17, 2017 at 16:17

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

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

2 Comments

SuperGirl Over a year ago

it worked , the error disappeared, but I don't know why it doesn't go inside the if(data.success) even if I put correct credentials

El houcine bougarfaoui Over a year ago

check the value of data.success

Eddie Martinez · Accepted Answer · 2017-03-17 16:03:33Z

1

Your issue is there is no function json() in your data object. Change to

.subscribe(
          (data) => {         
                window.localStorage.setItem('auth_key', data.json().token);
                console.log(username);
                this.isAuthenticated = true;                     
                resolve(this.isAuthenticated);
            });

Also you do not need to perform that check inside your data method, since if you are inside here the request was successful, otherwise it would have gone to errors.

answered Mar 17, 2017 at 16:03

Eddie Martinez

13.9k15 gold badges86 silver badges109 bronze badges

Comments

Anthony · Accepted Answer · 2017-03-17 16:32:36Z

0

You can try this

this.http.post('http://localhost:8080/StudentManager/login', creds, { headers: headers })
      .map( res => res.json() )
      .subscribe(
          (data) => {
                     if(data.success) {
                          ....
                    } 
            });

    }

answered Mar 17, 2017 at 16:32

Anthony

1

Collectives™ on Stack Overflow

Angular2: data.json is not a function

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