Angular - TypeError: Converting circular structure to JSON

Question

I'm getting this error at angular service's map method but my returned datas doesn't seem to contain any circular reference, here is my json object:

[{"id":14,
  "sender": 
    {"id":20,"email":"p.martelliere@gmail.com","username":"test5","roles": 
    ["ROLE_USER"],"status":"active","note":"0","points":0,
    "devices":[],"job":"Caisse","showJob":false,"notificationsActivated":true,
    "connected":true,"tokenConfirm":"","birthDate":[]
},"receiver": 
     {"id":12,"email":"test2@yopmail.com","username":"test2","tokenConfirm":"",
     "job":"g\u00e9rant","showJob":false,"note":"0","points":0,
     "roles":["ROLE_USER"],"status":"active","notificationsActivated":true,
     "connected":true,"devices":[]
},
  "myNeed":"Te ster",
  "whatICanGive":"1",
  "messages":[],
  "status":"active"
}]

Here's my chatRequest angular Entity:

export class NmChatRequest {
    // Raw attributes
    id : number;
    myNeed : string;
    whatICanGive : string;
    status : string;
    createdAt : Date;
    updatedAt : Date;
    deletedAt : Date;
    // x-to-one
    id_receiver: number;


    constructor(json? : any) {
        if (json != null) {
            this.id = json.id;
            this.myNeed = json.myNeed;
            this.whatICanGive = json.whatICanGive;
            this.status = json.status;
            this.id_receiver = json.id_receiver;
            if (json.createdAt != null) {
                this.createdAt = new Date(json.createdAt);
            }
            if (json.updatedAt != null) {
                this.updatedAt = new Date(json.updatedAt);
            }
            if (json.deletedAt != null) {
                this.deletedAt = new Date(json.deletedAt);
            }
        }
    }
}

This entity is used to get the object from json.

Here's my ChatRequestService:

/**
     * Create the passed nmChatRequest.
     */
    add(nmChatRequest : NmChatRequest, token: string) : Observable<NmChatRequest> {
        let body = nmChatRequest;

        return this.http.post(this.chatUrl, body, {headers: new HttpHeaders({ 'Content-Type': 'application/json', 'X-Auth-Token': token })})
            .pipe(
                map(response => new NmChatRequest(response)),
                catchError(this.handleError)
            );
    }

What am I missing ?

Thanks to anyone who will take the time to read/answer this question.

Answer 1

I built a stackblitz from the above provided pieces. It seemed to work fine for me if I changed the json string to an object instead of an array.

So no outside brackets:

{"id":14,
  "sender": 
    {"id":20,"email":"p.martelliere@gmail.com","username":"test5","roles": 
    ["ROLE_USER"],"status":"active","note":"0","points":0,
    "devices":[],"job":"Caisse","showJob":false,"notificationsActivated":true,
    "connected":true,"tokenConfirm":"","birthDate":[]
},"receiver": 
     {"id":12,"email":"test2@yopmail.com","username":"test2","tokenConfirm":"",
     "job":"g\u00e9rant","showJob":false,"note":"0","points":0,
     "roles":["ROLE_USER"],"status":"active","notificationsActivated":true,
     "connected":true,"devices":[]
},
  "myNeed":"Te ster",
  "whatICanGive":"1",
  "messages":[],
  "status":"active"
}

If you are indeed getting an array and not a single object, you may need to modify your code to pass in the first element of the array. Something like this:

map(response => new NmChatRequest(response[0]))

Here is the stackblitz: https://stackblitz.com/edit/angular-wgunjb?file=src%2Fapp%2Fapp.component.ts