Converting circular structure to JSON

Salut à tous.
J'utilise Angular 7 et j'ai une erreur de type "ERROR TypeError: Converting circular structure to JSON"
comme ceci :

Citation:

before api call : HttpRequest*{url: "http://localhost:8080/edasta/marques", body: NgForm, reportProgress: false, withCredentials: false, responseType: "json",*…}
core.js:7187 ERROR TypeError: Converting circular structure to JSON
--> starting at object with constructor 'NgForm'
| property '_directives' -> object with constructor 'Array'
| index 0 -> object with constructor 'NgModel'
--- property '_parent' closes the circle
at JSON.stringify (<anonymous>)
at HttpRequest.serializeBody (http.js:804)
at Observable._subscribe (http.js:1858)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at DoOperator.call (tap.js:16)
at Observable.subscribe (Observable.js:23)
at subscribeTo.js:20
at subscribeToResult (subscribeToResult.js:7)
at MergeMapSubscriber._innerSub (mergeMap.js:59)
defaultErrorLogger @ core.js:7187
handleError @ core.js:7239
next @ core.js:31602
schedulerFn @ core.js:27834
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:27796
(anonymous) @ core.js:30931
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:30818
onHandleError @ core.js:30928
handleError @ zone-evergreen.js:363
runTask @ zone-evergreen.js:171
invokeTask @ zone-evergreen.js:465
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
setTimeout (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.<computed> @ zone-evergreen.js:1428
hostReportError @ hostReportError.js:2
error @ Subscriber.js:158
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
_error @ Subscriber.js:75
error @ Subscriber.js:55
notifyError @ OuterSubscriber.js:7
_error @ InnerSubscriber.js:14
error @ Subscriber.js:55
_error @ tap.js:56
error @ Subscriber.js:55
_trySubscribe @ Observable.js:50
subscribe @ Observable.js:28
call @ tap.js:16
subscribe @ Observable.js:23
(anonymous) @ subscribeTo.js:20
subscribeToResult @ subscribeToResult.js:7
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ scalar.js:4
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
onSubmit @ marque-form.component.ts:39
(anonymous) @ MarqueFormComponent.html:10
handleEvent @ core.js:34777
callWithDebugContext @ core.js:36395
debugHandleEvent @ core.js:36031
dispatchEvent @ core.js:22519
(anonymous) @ core.js:24416
schedulerFn @ core.js:27877
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:27796
onSubmit @ forms.js:5283
(anonymous) @ MarqueFormComponent.html:10
handleEvent @ core.js:34777
callWithDebugContext @ core.js:36395
debugHandleEvent @ core.js:36031
dispatchEvent @ core.js:22519
(anonymous) @ core.js:33709
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:30873
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
Show 60 more frames

voici mes codes :

Marque Service :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 import { Injectable } from '@angular/core'; import {HttpClient, HttpHeaders} from "@angular/common/http"; import {User} from "./User"; @Injectable({ providedIn: 'root' }) export class MarqueService { public host:string = 'http://localhost:8080/edasta/'; res:any constructor( private http : HttpClient ) { } getResourse(url) { var headers = new HttpHeaders({ 'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'Authorization': 'Bearer '+ localStorage.get('access_token') }); let options = { headers: headers }; return this.http.get( this.host + url,options) /* .subscribe(data=>{ this.marque = data; }, error1 => { console.log('erreur'); } )*/ } onSave(data){ var headers = new HttpHeaders({ 'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'X-Requested-With': 'XMLHttpRequest', 'Authorization': 'Bearer '+ localStorage.getItem('access_token') }); let options = { headers: headers }; return this.http.post( this.host+'marques',data,options ) } }
Marque-form.ts
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 import { Component, OnInit } from '@angular/core'; import {MarqueService} from "../../services/marque.service"; import {parseHttpResponse} from "selenium-webdriver/http"; @Component({ selector: 'app-marque-form', templateUrl: './marque-form.component.html', styleUrls: ['./marque-form.component.css'] }) export class MarqueFormComponent implements OnInit { private marques; constructor( private marqueService : MarqueService ) { } ngOnInit() { } private getMarque() { this.marqueService.getResourse("/marques") .subscribe(data=>{ this.marques = data; }, error1 => { console.log('erreur'); } ) } onSubmit(f){ this.marqueService.onSave(f) .subscribe( data=>{ console.log(data); } ) } /* insertMark: async (context, payload) => { if (context.getters.MAR(payload.id)) await window.api.put(`marques/${payload.id}`, payload); else { let res = await window.api.post('marques', payload); if(res.status === 201) context.commit('ADD_MAR', res.data); } */ }
marque-form
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <div class="row justify-content-center spacer"> <div class="col-sm-12 col-md-6 justify-content-center"> <div class="card"> <div class="card-header">Marque</div> <div class="card-body"> <form #f="ngForm" (ngSubmit)="onSubmit(f)"> <div class="form-group"> <input type="text" class="form-control" name="libelle" id="libelle" placeholder="Libelle" ngModel> </div> <div class="form-group"> <input type="text" class="form-control" name="description" id="description" placeholder="Description" ngModel> </div> <div class="row justify-content-center"> <div class="col-sm-12"> <button type="submit" [disabled]="! f.valid" class="btn btn-success"> Valider </button> </div> </div> </form> {{f.value | json}} </div> </div> <br/> <div class="col-12 col-md-6"> <ul class="list-group" *ngIf="marque"> <li *ngFor="let m of marques._embedded.marques"> {{m.description}} </li> </ul> </div> </div> </div>
Merci de m'aider