converting circular structure to json error Ionic 3

Question

Hi everyone am new to angular 2+ and ionic 3 and am trying to post a login form from my ionic 3 app to my asp.net web api application to perform a token based authentication but i get this error : converting circular structure to json error

This is the component code :

  @Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  providers:[LoginService],
  })
  export class LoginPageComponent {

  errorMessage:string;
  loginModel = new ILoginModel();
  constructor(public navCtrl: NavController,private loginService: 
  LoginService) {}
  token: string;

  logUser(){

     this.loginService.login(this.loginModel)
    .subscribe(token => this.token= token,
    error => this.errorMessage = <any>error);

  }
  }

This is the service code :

@Injectable()
export class LoginService{

loginModel: ILoginModel;
urlBase:string = 'http://localhost:1487/';
header = new HttpHeaders()
              .set('content-type','application/x-www-form-urlencoded');
token :any;


constructor(private _http: HttpClient){}


  login(loginModel:ILoginModel):Observable<string>{
     this._http.post(this.urlBase 
     +'token','username='+this.loginModel.userName+
   '&password='+this.loginModel.password+'&grant_type=
  '+this.loginModel.grant_type)
     .map((response: HttpResponse<string>)=> <string>response.body)
    //  .do(data => console.log('Response Token: '+JSON.stringify(data)))
     .catch(this.handleError)
     .subscribe((res: HttpResponse<string>)=>{this.token = res.body});
     return this.token;


    }

    private handleError(error: HttpResponse<any>) {
    console.error(error);
    return Observable.throw(error.body().JSON() || 'Server Error');
  }

  }

Thank you.

Melchia · Accepted Answer · 2017-11-21 22:06:21Z

1

You're using the subscribe method twice. Change this

login(loginModel:ILoginModel){
     return this._http.post(this.urlBase 
     +'token','username='+loginModel.userName+
   '&password='+loginModel.password+'&grant_type=
  '+loginModel.grant_type)
     .map(response=> <string>response.body.json())
    //  .do(data => console.log('Response Token: '+JSON.stringify(data)))
     .catch(this.handleError)
    }

change this too.

 token: any;

  logUser(){

     this.loginService.login(this.loginModel)
    .subscribe(token => {this.token= token,
                        console.log(this.token)},
    error => this.errorMessage = <any>error);

  }
  }

edited Nov 21, 2017 at 22:06

answered Nov 21, 2017 at 21:30

Melchia

24.6k23 gold badges110 silver badges130 bronze badges

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

4 Comments

Melchia Over a year ago

Can you check again ?

Haytham Over a year ago

It raises an error in the code : "Cannot asign type Observable<ArrayBuffer> To Observable<string>"

Haytham Over a year ago

Thank you Melchia , it is working now and i marked your answer as valid , But the challenge for me now is to make it work with Observables.

Melchia Over a year ago

You are returning an Observable & you're subscribing on it in your logUser method.

Collectives™ on Stack Overflow

converting circular structure to json error Ionic 3

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related