Angular - TypeError: Converting circular structure to JSON

Pierrick Martellière

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":"[email protected]","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":"[email protected]","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.

DeborahK

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":"[email protected]","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":"[email protected]","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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Uncaught TypeError: Converting circular structure to JSON after Angular / dependencies update

Sequelize: TypeError: Converting circular structure to JSON

GraphCool TypeError: Converting circular structure to JSON

"TypeError: Converting circular structure to JSON" with GET request

"TypeError: Converting circular structure to JSON" with GET request

Elliptic : TypeError : Converting circular structure to JSON

Axios TypeError: Converting circular structure to JSON

TypeError: Converting circular structure to JSON in nodejs

avoiding TypeError: Converting circular structure to JSON

Angular JS $scope.$apply giving interpolation error "TypeError: Converting circular structure to JSON"

TypeError: Converting circular structure to JSON - find error in json

TypeError converting circular structure to json at JSON.stringify (<anonymous>)

Reading fixture is throwing error TypeError: Converting circular structure to JSON

how to solve (Uncaught TypeError: Converting circular structure to JSON)

Moving code to an exported function results in TypeError: Converting circular structure to JSON

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON

Express Middleware: ERROR: TypeError: Converting circular structure to JSON

TypeError: Converting circular structure to JSON in retrieving html string from mongodb

Firestore references create a "TypeError: Converting circular structure to JSON"

Chrome sendrequest error: TypeError: Converting circular structure to JSON

TypeError: Converting circular structure to JSON property 'name' closes the circle

TypeError: Converting circular structure to JSON when trying to POST request

TypeError: Converting circular structure to JSON with StorybookJS on React Native

Doing a proper MongoDB Query (TypeError: Converting circular structure to JSON)

VM1374:32 Uncaught TypeError: Converting circular structure to JSON(…)

ERROR TypeError: Converting circular structure to JSON --> starting at object with constructor 'FormGroup'

Amazon Cognito confirmPassword fails with (TypeError: Converting circular structure to JSON)

TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest'

How do I solve "TypeError: Converting circular structure to JSON" in NodeJS

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive