CODEWITHSUNDEEP
angular
SuperGirl
SuperGirl

Reputation: 288

Angular2: data.json is not a function

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:

enter image description here

Upvotes: 1

Views: 8061

Answers (3)

Anthony
Anthony

Reputation: 1

You can try this

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

    }

Upvotes: 0

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37343

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);
        });

Upvotes: 3

Eddie Martinez
Eddie Martinez

Reputation: 13910

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.

Upvotes: 1

Related Questions