TypeError: Converting circular structure to JSON in JavaScript – How to fix it?

In this article, I will help you fix the TypeError: Converting circular structure to JSON in JavaScript. What is the cause of it, and how to solve it? Let’s go into details now.

What causes “TypeError: Converting circular structure to JSON” in JS

The error occurs when an object has a property that points to itself. JSON.stringify() will return that error.

Code sample:

let bookObj = {
    title: "math",
    pages: 350,
    author: [{ name: "John" }, { name: "Jade" }]
};

bookObj.language = bookObj;
console.log(JSON.stringify(bookObj));

Output:

The code above, JSON.stringify() give the error because JSON.stringify() is not supported if the object has circular references.

How to fix this error

Pass in an array of properties for JSON.stringify()

Syntax

JSON.stringify(value, replacer, space)

Parameters

• value: is the input value to be converted to a string (required).
• replacer: array of properties used to convert to string or a function(key, value)- called for each object’s property (optional).
• space: the number of space characters used to format JSON in Javascript (optional).

Code sample:

let bookObj = {
    title: "math",
    pages: 350,
    author: [{ name: "John" }, { name: "Jade" }]
};

bookObj.language = bookObj;
console.log(JSON.stringify(bookObj, ["title", "pages", "author"]));

Output

{"title":"math","pages":350,"author":[{},{}]}

Now, JSON.stringify() does not have the above circular reference error. But the elements inside the author array are empty objects {}. That’s because the name attribute is not listed.

You can customize the allowed property list to accept all properties except the property with the circular reference as follows:

let bookObj = {
    title: "math",
    pages: 350,
    author: [{ name: "John" }, { name: "Jade" }]
};

bookObj.language = bookObj;
console.log(JSON.stringify(bookObj, ["title", "pages", "author", "name"]));

Output

{"title":"math","pages":350,"author":[{"name":"John"},{"name":"Jade"}]}

All properties (except language) have been included in the JSON. However, the usage is still quite lengthy. You can use the replacer function instead of arrays to solve this problem.

Use replacer() function

The replacer() function is called for each (key, value) pair in the object and returns the replaced values or returns undefined if you want to omit that property. 

Code sample:

let bookObj = {
    title: "math",
    pages: 350,
    author: [{ name: "John" }, { name: "Jade" }]
};

bookObj.language = bookObj;

function replacer(key, value) {
    return key == "language" ? undefined : value;
}

console.log(JSON.stringify(bookObj, replacer));

Output

{"title":"math","pages":350,"author":[{"name":"John"},{"name":"Jade"}]}

Summary

Above, I showed you how to fix the TypeError: Converting circular structure to JSON in JS. I hope they are helpful to you. To better understand the lesson’s content, practice rewriting today’s examples. And let’s learn more about JSON in the next lessons here. Have a great day!

Maybe you are interested:

• TypeError: filter is not a function in JavaScript
• TypeError: indexOf is not a function in JavaScript
• TypeError: querySelectorAll is not a function in JS
• TypeError: Cannot read property ‘top’ of Undefined in JS

Joni Smith

Hi, my name is Joni Smith. My job is a programmer. I love learning programming languages, especially C++, C#, php, javascript, html, css. I want to share them with you. I hope my articles will bring a lot of useful knowledge to you.

---

Name of the university: HVNH BA
Major: htttql MIS
Programming Languages: C++, C#, php, javascript, html, css