TypeError: Converting circular structure to JSON when trying to POST request

Question

I am getting the error in the title and here is the full stack trace, i am not sure what it is, any insight is welcomed!

browser_adapter.js:84 EXCEPTION: Error in ./ParametersFormComponent class ParametersFormComponent - inline template:3:31BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL EXCEPTION: TypeError: Converting circular structure to JSONBrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:77next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 TypeError: Converting circular structure to JSON     at Object.stringify (native)     at ParametersFormComponent.onSubmit (http://localhost:4200/main.bundle.js:61451:25)     at DebugAppView._View_ParametersFormComponent0._handle_ngSubmit_7_0 (ParametersFormComponent.ngfactory.js:1809:28)     at http://localhost:4200/main.bundle.js:57019:24     at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/main.bundle.js:11839:54)     at SafeSubscriber.__tryOrUnsub (http://localhost:4200/main.bundle.js:48280:16)     at SafeSubscriber.next (http://localhost:4200/main.bundle.js:48229:22)     at Subscriber._next (http://localhost:4200/main.bundle.js:48179:26)     at Subscriber.next (http://localhost:4200/main.bundle.js:48143:18)     at EventEmitter.Subject._finalNext (http://localhost:4200/main.bundle.js:9733:30)     at EventEmitter.Subject._next (http://localhost:4200/main.bundle.js:9725:18)     at EventEmitter.Subject.next (http://localhost:4200/main.bundle.js:9682:14)BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:78next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:81next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 DebugContext {_view: _View_ParametersFormComponent0, _nodeIndex: 7, _tplRow: 3, _tplCol: 31}BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:82next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 :4200/polyfills.bundle.js:3327 Uncaught EXCEPTION: Error in ./ParametersFormComponent class ParametersFormComponent - inline template:3:31 ORIGINAL EXCEPTION: TypeError: Converting circular structure to JSON ORIGINAL STACKTRACE: TypeError: Converting circular structure to JSON     at Object.stringify (native)     at ParametersFormComponent.onSubmit (http://localhost:4200/main.bundle.js:61451:25)     at DebugAppView._View_ParametersFormComponent0._handle_ngSubmit_7_0 (ParametersFormComponent.ngfactory.js:1809:28)     at http://localhost:4200/main.bundle.js:57019:24     at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/main.bundle.js:11839:54)     at SafeSubscriber.__tryOrUnsub (http://localhost:4200/main.bundle.js:48280:16)     at SafeSubscriber.next (http://localhost:4200/main.bundle.js:48229:22)     at Subscriber._next (http://localhost:4200/main.bundle.js:48179:26)     at Subscriber.next (http://localhost:4200/main.bundle.js:48143:18)     at EventEmitter.Subject._finalNext (http://localhost:4200/main.bundle.js:9733:30)     at EventEmitter.Subject._next (http://localhost:4200/main.bundle.js:9725:18)     at EventEmitter.Subject.next (http://localhost:4200/main.bundle.js:9682:14) ERROR CONTEXT: [object Object] Navigated to http://localhost:4200/? 

component

import {Component} from '@angular/core'; import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES, Validators, AbstractControl, Control } from '@angular/forms'; import { Headers, Http, Response } from '@angular/http';  @Component({     selector: 'parameters-form',     directives: [REACTIVE_FORM_DIRECTIVES],     templateUrl: 'form.template.html' }) export class ParametersFormComponent {   response: {};    myForm: FormGroup;    systemParameters: AbstractControl;   param: AbstractControl;   liftOperator: AbstractControl;   restrictOperator: AbstractControl;   xInitial: AbstractControl;    system_arr: number[];   param_arr: number[];   restrict_arr: number[];   lift_arr: number[];   xinitial_arr: number[];    constructor(private http: Http) {     this.myForm = new FormGroup({       'realisations' : new FormControl('', Validators.required),       'numConstSteps' : new FormControl('', Validators.required),       'timeHorizon': new FormControl('', Validators.required),       'continuationStep' : new FormControl('', Validators.required),       'continuationStepSign' : new FormControl('', Validators.required),       'numberOfModelParameters' : new FormControl('', Validators.required),       'systemParameters' : new FormControl(''),       'param' : new FormControl(''),       'netLogoFile' : new FormControl('', Validators.required),       'numberOfModelVariables' : new FormControl('', Validators.required),       'restrictOperator' : new FormControl(''),       'liftOperator' : new FormControl(''),       'xInitial' : new FormControl('')     });      this.system_arr = [];     this.param_arr = [];     this.restrict_arr = [];     this.lift_arr = [];     this.xinitial_arr = [];     this.param = this.myForm.controls["param"];     this.systemParameters = this.myForm.controls['systemParameters'];     this.restrictOperator = this.myForm.controls['restrictOperator'];     this.liftOperator = this.myForm.controls['liftOperator'];     this.xInitial = this.myForm.controls['xInitial'];   }    addToArray(event, value: number, target: string): void {     if (event.which === 13) {        switch (target) {         case 'systemParameters':           this.system_arr.push(value);           (<Control>this.systemParameters).updateValue('');           break;         case 'param':           this.param_arr.push(value);           (<Control>this.param).updateValue('');           break;         case 'liftOperator':           this.lift_arr.push(value);           (<Control>this.liftOperator).updateValue('');           break;         case 'restrictOperator':           this.restrict_arr.push(value);           (<Control>this.restrictOperator).updateValue('');           break;         case 'xInitial':           this.xinitial_arr.push(value);           (<Control>this.xInitial).updateValue('');           break;        }     }   }    deleteItem(value: any, target: string): void {     let pos = 0;     switch (target) {       case 'systemParameters':         pos = this.system_arr.indexOf(value);         this.system_arr.splice(pos, 1);         break;       case 'param':         pos = this.param_arr.indexOf(value);         this.param_arr.splice(pos, 1);         break;       case 'liftOperator':         pos = this.lift_arr.indexOf(value);         this.lift_arr.splice(pos, 1);         break;       case 'restrictOperator':         pos = this.restrict_arr.indexOf(value);         this.restrict_arr.splice(pos, 1);         break;       case 'xInitial':         pos = this.xinitial_arr.indexOf(value);         this.xinitial_arr.splice(pos, 1);         break;      }   }    isFullfilled(m: number, n: number) {      if (           m == this.restrict_arr.length           && m == this.xinitial_arr.length           && m == this.lift_arr.length           && n == this.param_arr.length           && n == this.system_arr.length        ) {          if (m != 0 && n != 0 ){            return true;          }         }         return null;   }   onSubmit() {      this.myForm.value.systemParameters = this.system_arr;     this.myForm.value.liftOperator = this.lift_arr;     this.myForm.value.restrictOperator = this.restrict_arr;     this.myForm.value.param = this.param_arr;     this.myForm.value.xInitial = this.xinitial_arr;      let Form = JSON.stringify(this.myForm);      let headers = new Headers();     headers.append('Content-Type', 'application/json');     this.http.post('http://localhost:3000/webhook', Form, { headers: headers })     .map((data: Response) => data.json())     .subscribe(       data => this.response = data,       error => console.log(error)     );      console.log('your submitted value:', this.myForm.value);   }  } 

Was working fine before i ported it from Beta to RC5

Answer 1

The error seems to be due to the fact that i was trying to stringify the entire myForm object where as what i wanted was to stringify only the values

the correct syntax

let Form = JSON.stringify(this.myForm.value);