TypeError: преобразование круговой структуры в JSON при попытке запроса POST

Я получаю ошибку в заголовке, и вот полная трассировка стека, я не уверен, что это такое, любое понимание приветствуется!

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/?

компонент

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

}

Работал хорошо, прежде чем я портировал его с Beta на RC5

ОТВЕТЫ

Ответ 1

Похоже, что ошибка связана с тем, что я пытался скомпоновать весь объект myForm, где, поскольку я хотел, было строчить только значения

правильный синтаксис

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

Ответ 2

Это, вероятно, из-за круговой зависимости в объекте. В этом случае невозможно выполнить строковое преобразование, но всегда можно войти в консоль браузера. Таким образом, мы можем создать очень простую pipeу для этой цели.

в app.module.ts:

import { LogPipe } from './log.pipe';

@NgModule({
  declarations: [
    //...
    LogPipe,
  ],
})
export class AppModule {}

@Pipe({name: 'log'})
export class LogPipe implements PipeTransform {
    public transform(value: object): void {
        console.log(value);
        return;
    }
}

Тогда мы можем использовать канал для быстрой регистрации

{{'some text' | log}}

Ответ 3

В дополнение к уже предоставленным ответам, вот что вы можете сделать, когда намереваетесь опубликовать все значения формы.

Пример формы:

<form #formData="ngForm" (ngSubmit)="submit(formData)">
    <input ngModel="my value" name="email" id="email" ...>
    ...
</form>

В тс:

submit(formData: any) {
    const data = JSON.stringify(formData.value);
    this.myService.postData(data)...
}

Вы получаете значения всей формы из formData.value, а затем преобразуете в строку, используя JSON.stringify(obj)

Надеюсь, это кому-нибудь поможет.