TypeError: Conversion d'une structure circulaire en JSON lors de la tentative de requête POST

J'obtiens l'erreur dans le titre et on a la trace de la pile, je ne suis pas sûr de ce qu'il est, toute idée est la bienvenue!

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

composant

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

}

Marchait très bien avant que j'ai porté à partir du Bêta à RC5

OriginalL'auteur Petros Kyriakou | 2016-08-11

angular

28

L'erreur semble être dû au fait que j'essayais de stringify l'ensemble de la myForm objet où, comme quoi je voulais, c'était stringify uniquement les valeurs

la syntaxe correcte
```
let Form = JSON.stringify(this.myForm.value);
```
OriginalL'auteur Petros Kyriakou

C'est probablement à cause de dépendance circulaire dans l'objet. Dans ce cas, il n'est pas possible de stringify mais il est toujours possible de se connecter au navigateur de la console. Nous pouvons donc créer une base très tuyau à cette fin.

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

Ensuite, nous pouvons utiliser le tuyau pour rapide journalisation

{{'some text' | log}}

OriginalL'auteur Fırat KÜÇÜK

Vous devez vous connecter pour publier un commentaire.