Converting circular structure to JSON

JSON does not circularly refer to objects because it does not support circular structures. Circular structure refers to objects directly or indirectly themselves. Circularly connect the last one to the first one in a loop …

converting circular structure to json

JSON does not circularly refer to objects because it does not support circular structures. Circular structure refers to objects directly or indirectly themselves. Circularly connect the last one to the first one in a loop such as:

A → A 

OR

A → B → A

OR

A → B → C → A

Or in programming reference suppose we have an application where the user has multiple images and that all images are referencing to the owner.

{
    User1: {
        Image1:{
            URL: 'Image Url',
            Owner: User1 (object)
        },
        Image2:{
            URL: 'Image Url',
            Owner: User1 (object)
        }
    }
}

JSON.stringify() converts JavaScript objects into JSON. JSON only allows serialization and does not support circularly connected objects to return output.

Suppose in the given below example, we have taken an empty object named “NYC”.

Here we are referencing the same object in the second line 

NYC.a = NYC

Where NYC is referencing itself as “NYC.a” and we want to print them serially by using “stringify” that does not support printing circular structure into serial objects.

var NYC ={}
NYC.a = NYC
JSON.stringify(NYC)

you get the output

VM150:3 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    --- property 'a' closes the circle
    at JSON.stringify (<anonymous>)
    at <anonymous>:3:6

How to resolve “typeerror: Converting circular structure to JSON”?

Here is the method that helps to resolve the “typeerror: Converting circular structure to JSON”. stringify serialize the data and it does not support circular data to proceed and print output.

In the below code, we used the replacerFunc () function. we are calling the WeakSet objects by using replacerfunc (). WeakSet() object stores objects and referencing objects that are weakly occurred. Because filtering the objects to remove the repeated data, all the objects that are stored in Weakset(), may occur only once. After all the above processes, an operator is a new keyword that will produce a blank object.

In the return statement, we embedded if statements. The first statement that we used is consists of “typeof” operator which will return the primitive type of data ().

//    converting circular structure to json
let circObj = {
    name: "John",
    age: 23,
    gender: "Male"
 }
 
 circObj.myself = circObj
 
 const replacerFunc = () => {
    const visited = new WeakSet();
    return (key, value) => {
      if (typeof value === "object" && value !== null) {
        if (visited.has(value)) {
          return;
        }
        visited.add(value);
      }
      return value;
    };
  };
  
  JSON.stringify(circObj, replacerFunc());

Output

'{"name":"John","age":23,"gender":"Male"}'

Conclusion:

In this article, we discuss the reason why this “uncaught typeerror: Converting circular structure to JSON” occurred and how we can resolve this error.

Suggested Read: 500 Internal server error

Leave a Comment