How to fix TypeError: Converting circular structure to JSON in JS?

I think I speak for everyone who is a newbie at JavaScript or is currently studying JavaScript when I say there is nothing more frustrating than attempting to find the error in your code and still not being able to do it after trying for hours. Even after spending hours looking at the same lines of code, you can still miss the error. But as any seasoned programmer will tell you, the secret to identifying the issue is to sit back and look at the big picture and the overall flow of the program. Of course, there are situations when, despite your best efforts, you cannot understand the error in your code. If you are getting the error “TypeError: Converting circular structure to JSON in JS” you’ve come to the right place. In this blog, we will discuss what exactly a Type Error is, how it can occur in Java Script and how to get rid of it for good.

What exactly is TypeError?

Let us first learn how JavaScript errors work in order to understand TypeError. In addition to logical errors, JavaScript also has two more sorts of errors: runtime errors and syntax errors (we commonly call them exceptions).

Syntax errors occur when the compiler detects an incorrect statement. However, TypeError in this instance is a runtime issue. When software crashes even though the syntax is correct, it is most probably a runtime error. Depending on the kind of error the program encounters, there are all kinds of runtime errors, including TypeError.

When an exception occurs, along with the error message, the kind of exception your program encountered (in this case, TypeError) is shown in the output. “Converting circular structure to JSON” is the error message that appears in our situation, telling us that there is a problem with the object we are trying to convert to JSON. When we attempt to access or pass a method or property of an unexpected type, we encounter a TypeError.

When does this error occur?

This error occurs when you try to convert a JavaScript object to JSON, but the object contains a circular reference. A circular reference occurs when an object refers to itself, directly or indirectly. For example, imagine you have a JavaScript object with a property that references the object itself:

let obj = {
  name: "Codedamn",
  parent: null
}

obj.parent = obj;Code language: JavaScript (javascript)

In this case, the obj object contains a circular reference because the parent property references the obj object. When you try to convert this object to JSON, you’ll get the “TypeError: Converting circular structure to JSON” error because JSON.stringify() (the method used to convert JavaScript objects to JSON) doesn’t support circular references.

The solution

Thankfully, the solution to this TypeError problem is pretty straightforward. To fix this error, you need to make sure that your objects don’t contain circular references. One way to do this is to use a library like JSONC that supports converting circular structures to JSON. Alternatively, you can manually detect and remove circular references from your objects before calling JSON.stringify().

Here is a simple code snippet that will let you ignore properties with circular references in an object:

function stringify(obj) {
  let cache = [];
  let str = JSON.stringify(obj, function(key, value) {
    if (typeof value === "object" && value !== null) {
      if (cache.indexOf(value) !== -1) {
        // Circular reference found, discard key
        return;
      }
      // Store value in our collection
      cache.push(value);
    }
    return value;
  });
  cache = null; // reset the cache
  return str;
}Code language: JavaScript (javascript)

In this function, we use the JSON.stringify() method’s second argument (the replacer function) to detect and remove circular references from the object before converting it to JSON. We do this by keeping track of all the objects we have seen in a cache array and checking if the current value is already in the cache. If it is, we return undefined to remove the value from the final JSON string.

With this function, you can safely convert objects with circular references to JSON without getting the “TypeError: Converting circular structure to JSON” error. Just remember to use this function instead of JSON.stringify() whenever you need to convert an object to JSON.

Conclusion

The first thing you should do when you encounter an issue is to Google it. It’s likely that another programmer has already dealt with this problem and found a solution! You may make it easier to debug your code by organizing it and adding comments. It is frequently helpful to print out the values of variables during debugging to identify the issue. In order to discover and correct mistakes, you can also use a debugging tool like a linter or a debugger. In this article, we understood the meaning of the error message “TypeError: Converting circular structure to JSON”. We looked at when this error message might occur and the possible actions you can take to get rid of it. I hope this article has cleared all your doubts regarding circular structures, and how it can be a problem with the JSON.stringify() method.

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!