TypeError Converting circular structure to JSON In JavaScript (Resolved)

The “TypeError: Converting circular structure to JSON” error can occur when trying to stringify an object that contains a self-referencing key-value pair. JSON.stringify() doesn’t allow self-references. By removing the self-references, the error can be resolved.

converting circular structure to json in javascript

Let’s look at this error in detail below. But first, let’s understand what self-referencing is.

A self-referencing key-value pair is a key-value pair that points to the same object it’s defined in. For example:

let obj = {};

obj.self = obj; // self-referencing key-value pair

In the code above, the “self” key in the obj object points to the obj object itself. When passed to JSON.stringify(), this will cause an error because self-references are not allowed.

TypeError: Converting circular structure to JSON

Here is code that will cause the “TypeError: Converting circular structure to JSON” error:

let obj = {};

obj.name= obj; // self-referencing key-value pair

console.log(JSON.stringify(obj)); // TypeError: Converting circular structure to JSON

To fix this error, you need to remove the self-referencing key-value pair from the object before passing it to JSON.stringify(). For example:

let obj = {};

obj.name= obj; // self-referencing key-value pair

delete obj.name; // remove self-referencing key-value pair

console.log(JSON.stringify(obj)); // {}

You can write a function to remove all the self-referencing key-value pairs from an object. The function below does that –

function removeCircularReferences(obj) {

const seen = new WeakSet();

return (key, value) => {

if (typeof value === "object" && value !== null) {

if (seen.has(value)) {

return; // drop the current key-value pair

} else {

seen.add(value); // add the current key-value pair to the set

}

}

return value; // return the current key-value pair

};

}

You can use the removeCircularReferences() function to fix the “TypeError: Converting circular structure to JSON” error. For example:

let obj = {};

obj.name= obj; // self-referencing key-value pair

console.log(JSON.stringify(obj, removeCircularReferences(obj))); // {}

As you can see, the output is an empty object because all the self-references have been removed.

You can also use the JSON.stringify() method’s “replacer” parameter to fix the “TypeError: Converting circular structure to JSON” error. The replacer parameter is a function that’s called for each key-value pair in an object. You can use this function to remove self-references from an object.

The code below uses the replacer parameter to fix the “TypeError: Converting circular structure to JSON” error:

let obj = {};

obj.name= obj; // self-referencing key-value pair

console.log(JSON.stringify(obj, function(key, value) {

if (typeof value === "object" && value !== null) {

if (Object.is(value, this)) {

return; // drop the current key-value pair

}

}

return value; // return the current key-value pair

})); // {}

As you can see, the output is an empty object because all the self-references have been removed.

You can also use the replacer parameter to specify the properties that you want to include in the output. For example:

let obj = {

name: "John",

age: 30,

};

obj.self = obj; // self-referencing key-value pair

console.log(JSON.stringify(obj, ["name"])); // {"name":"John"}

As you can see, only the “name” property is included in the output because it’s the only property specified in the replacer parameter.

You can also use the replacer parameter to specify the order in which the properties should be included in the output. For example:

let obj = {

name: "John",

age: 30,

};

obj.self = obj; // self-referencing key-value pair

console.log(JSON.stringify(obj, ["age", "name"])); // {"age":30,"name":"John"}

As you can see, the “age” property is included before the “name” property in the output because it’s specified first in the replacer parameter.

Conclusion

You’ve learned how to fix the “TypeError: Converting circular structure to JSON” error in JavaScript. Now you can use the JSON.stringify() method without getting this error.

Leave a Reply