typeerror: converting circular structure to json angular 6

Question

Below is my class in angular 6

export class PersonalInfo {
    private _identity_Number: string;
    public get identity_Number(): string {
        return this._identity_Number;
    }
    public set identity_Number(v: string) {
        this._identity_Number = v;
    }
    private _name: string;
    public get Name(): string {
        return this._name;
    }
    public set Name(v: string) {
        this._name = v;
    }

    private _father_Name: string;
    public get father_Name(): string {
        return this._father_Name;
    }
    public set father_Name(v: string) {
        this._father_Name = v;
    }

    private _cnic: string;
    public get cnic(): string {
        return this._cnic;
    }
    public set cnic(v: string) {
        this._cnic = v;
    }
   constructor (private _services: DeoService) {}
}

I am taking input from user and want to save that information in my db.

below is the function that save information

this.user.saveUser(this._api, this._personalInfo);

 public saveUser (api: string, model: PersonalInfo ): Observable<boolean> {
    return this._http.post<boolean>(api, {user: model});
  }

But when i try to pass PersonalInfo object to saveuser it gives me the following error.

    ERROR TypeError: Converting circular structure to JSON
        at JSON.stringify (<anonymous>)
        at HttpRequest.push../node_modules/@angular/common/fesm5/http.js.HttpRequest.serializeBody (http.js:601)
        at Observable._subscribe (http.js:1460)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
        at subscribeTo.js:21
        at subscribeToResult (subscribeToResult.js:11)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:74)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:68)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)

Even i do JSON.stringify(obj). I am still getting the following error

RROR TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at DeoService.push../src/app/shared/model/deo.service.ts.DeoService.saveUser (deo.service.ts:23)
    at ProjectComponent.push../src/app/layout/project/project.component.ts.ProjectComponent.ngOnInit (project.component.ts:59)
    at checkAndUpdateDirectiveInline (core.js:18620)
    at checkAndUpdateNodeInline (core.js:19884)
    at checkAndUpdateNode (core.js:19846)
    at debugCheckAndUpdateNode (core.js:20480)
    at debugCheckDirectivesFn (core.js:20440)
    at Object.eval [as updateDirectives] (ProjectComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432)

What does it mean. How can i fix this error? Thanks for the help in advance

Answer 1

It means that you have a model structure that is circular. For example

export class Foo {

  id: number;
  bar: Bar;
}

export class Bar {

  name: string;
  foo: Foo;
}

This kind of structure may loop infinitely for circular reference. This is the error.

I think your problem derives from parsing a JSON object into a typed data. That results into an interface instance, not in a really typed instance. So maybe you have a circular dependency.

Try investigating it with some console.log on the entire object and search for that

Answer 2

before making the POST request you need to serialize the JSON which you are sending i.e. JSON.stringify(object which you are planning to send)

this.user.saveUser(this._api, this._personalInfo);

public saveUser (api: string, model: PersonalInfo ): Observable<boolean> {
  return this._http.post<boolean>(api, JSON.stringify({user: model}));
}