JSON.stringify, avoid TypeError: Converting circular structure to JSON

JSON.stringify, avoid TypeError: Converting circular structure to JSON

I have a big object I want to convert to JSON and send. However it has circular structure. I want to toss whatever circular references exist and send whatever can be stringified. How do I do that?
Thanks.
var obj = {
a: “foo”,
b: obj
}

I want to stringify obj into:
{“a”:”foo”}

Solutions/Answers:

Solution 1:

Use JSON.stringify with a custom replacer. For example:

// Demo: Circular reference
var o = {};
o.o = o;

// Note: cache should not be re-used by repeated calls to JSON.stringify.
var cache = [];
JSON.stringify(o, function(key, value) {
    if (typeof value === 'object' && value !== null) {
        if (cache.indexOf(value) !== -1) {
            // Duplicate reference found, discard key
            return;
        }
        // Store value in our collection
        cache.push(value);
    }
    return value;
});
cache = null; // Enable garbage collection

The replacer in this example is not 100% correct (depending on your definition of “duplicate”). In the following case, a value is discarded:

var a = {b:1}
var o = {};
o.one = a;
o.two = a;
// one and two point to the same object, but two is discarded:
JSON.stringify(o, ...);

But the concept stands: Use a custom replacer, and keep track of the parsed object values.

Solution 2:

In Node.js, you can use util.inspect(object). It automatically replaces circular links with “[Circular]”.


Albeit being built-in (no installation is required), you must import it

import * as util from 'util' // has no default export
import { inspect } from 'util' // or directly
// or 
var util = require('util')

To use it, simply call

console.log(util.inspect(myObject))

Also be aware that you can pass options object to inspect (see link above)

inspect(myObject[, options: {showHidden, depth, colors, showProxy, ...moreOptions}])


Please, read and give kudos to commenters below…

Solution 3:

I wonder why nobody posted the proper solution from MDN page yet…

const getCircularReplacer = () => {
  const seen = new WeakSet();
  return (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return;
      }
      seen.add(value);
    }
    return value;
  };
};

JSON.stringify(circularReference, getCircularReplacer());

Seen values should be stored in a set, not in array (replacer gets called on every element) and there is no need to try JSON.stringify each element in the chain leading to a circular reference.

Like in the accepted answer, this solution removes all repeating values, not just the circular ones. But at least it does not have exponential complexity.

Solution 4:

just do

npm i --save circular-json

then in your js file

const JSON = require('circular-json');
...
const json = JSON.stringify(obj);

You could also do

const CircularJSON = require('circular-json');

https://github.com/WebReflection/circular-json

NOTE: I have nothing to do with this package. But I do use it for this.

Solution 5:

I really liked Trindaz’s solution – more verbose, however it had some bugs. I fixed them for whoever likes it too.

Plus, I added a length limit on my cache objects.

If the object I am printing is really big – I mean infinitely big – I want to limit my algorithm.

JSON.stringifyOnce = function(obj, replacer, indent){
    var printedObjects = [];
    var printedObjectKeys = [];

    function printOnceReplacer(key, value){
        if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
        return 'object too long';
        }
        var printedObjIndex = false;
        printedObjects.forEach(function(obj, index){
            if(obj===value){
                printedObjIndex = index;
            }
        });

        if ( key == ''){ //root element
             printedObjects.push(obj);
            printedObjectKeys.push("root");
             return value;
        }

        else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
            if ( printedObjectKeys[printedObjIndex] == "root"){
                return "(pointer to root)";
            }else{
                return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase()  : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
            }
        }else{

            var qualifiedKey = key || "(empty key)";
            printedObjects.push(value);
            printedObjectKeys.push(qualifiedKey);
            if(replacer){
                return replacer(key, value);
            }else{
                return value;
            }
        }
    }
    return JSON.stringify(obj, printOnceReplacer, indent);
};

Solution 6:

Note that there is also a JSON.decycle method implemented by Douglas Crockford. See his
cycle.js. This allows you to stringify almost any standard structure:

var a = [];
a[0] = a;
a[1] = 123;
console.log(JSON.stringify(JSON.decycle(a)));
// result: '[{"$ref":"$"},123]'.

You can also recreate original object with retrocycle method. So you don’t have to remove cycles from objects to stringify them.

However this will not work for DOM Nodes (which are typical cause of cycles in real life use-cases). For example this will throw:

var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a)));

I’ve made a fork to solve that problem (see my cycle.js fork). This should work fine:

var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a, true)));

Note that in my fork JSON.decycle(variable) works as in the original and will throw an exception when the variable contain DOM nodes/elements.

When you use JSON.decycle(variable, true) you accept the fact that the result will not be reversible (retrocycle will not re-create DOM nodes). DOM elements should be identifiable to some extent though. For example if a div element has an id then it will be replaced with a string "div#id-of-the-element".