Discussion :

[eddyphan]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[eddyphan]

Mon souci vient de ma marque form.
Je dois ajouter .value à onsubmit(f) Merci.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<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.value)">
 
       <div class="input-group form-group">
         <input type="text" class="form-control"  placeholder="libelle" name="libelle" ngModel>
        </div>
 
        <div class="input-group form-group">
 
          <input type="text" class="form-control"  placeholder="name@address.com" name="description" ngModel>
 
        </div>
 
 
        <div class="row justify-content-center">
 
          <div class="col-sm-12">
 
            <!--[disabled]="! f.valid"-->
 
            <button type="submit" 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>