P

32

888

I have a big object I want to convert to JSON and send. However it has circular structure, so if I try to use JSON.stringify() I'll get:

TypeError: Converting circular structure to JSON

or

TypeError: cyclic object value

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"}

Pejsach answered 23/7, 2012 at 16:30 Comment(5)

Could you please post a sample object with a circular reference that you'd like to parse ? – Wileywilfong 23/7, 2012 at 16:33

something like this? – Dimaggio 23/7, 2012 at 16:58

possible duplicate of serializing object that contains cyclic object value – Bid 23/7, 2012 at 17:0

Late to the party but there is a github project to handle this. – Robbegrillet 30/5, 2014 at 19:35

closely related question: #23117970 – Arana 11/11, 2019 at 15:9

R

758

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

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

// Note: cache should not be re-used by repeated calls to JSON.stringify.
var cache = [];
JSON.stringify(circ, (key, value) => {
  if (typeof value === 'object' && value !== null) {
    // Duplicate reference found, discard key
    if (cache.includes(value)) 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.

As a utility function written in es6:

// safely handles circular references
JSON.safeStringify = (obj, indent = 2) => {
  let cache = [];
  const retVal = JSON.stringify(
    obj,
    (key, value) =>
      typeof value === "object" && value !== null
        ? cache.includes(value)
          ? undefined // Duplicate reference found, discard key
          : cache.push(value) && value // Store value in our collection
        : value,
    indent
  );
  cache = null;
  return retVal;
};

// Example:
console.log('options', JSON.safeStringify(options))

Ramsay answered 23/7, 2012 at 16:56 Comment(28)

There was a small bug in your code but the overall idea I understand, thanks! – Pejsach 23/7, 2012 at 18:27

You should be checking typeof value not typeof cache – Pejsach 23/7, 2012 at 19:16

By the way - I ran into an interesting scenario. Someone printed the attrs parameters in an AngularJS directive. I think this object is just too big to be printed. Chrome gives up after 2582 keys. So I added to my solution a cache length limit. – Tymon 21/7, 2013 at 15:9

JSON.stringify(window, ...) on this page breaks with the exception:

InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

– Auxiliaries 15/2, 2014 at 22:25

@Auxiliaries Trying to serialize a non-serializable object won't result in anything useful... What would you expect from serializing window? – Ramsay 15/2, 2014 at 22:34

I'm getting the same error trying to stringify an instance of CKEditor. It saves inside the DOM element associated, so, I can't stringify with this approach – Potence 12/3, 2014 at 16:51

@CruzDiablo Serializing DOM is usually meaningless. However, if you can think of a meaningful serialization method for your purposes, then you could try to add a custom serialized to DOM objects: Node.prototype.toJSON = function() { return 'whatever you think that is right'; }; (if you want anything more generic/specific, just try anything in the prototype tree: HTMLDivElement implements HTMLElement implements Element implements Node implements EventTarget; note: this may be browser-dependent, the previous tree is true for Chrome) – Ramsay 12/3, 2014 at 16:57

this is wrong because it will skip the second appearance of objects that are contained twice, even if not in a really cyclic structure. var a={id:1}; JSON.stringify([a,a]); – Ingleside 1/7, 2014 at 11:51

@Ingleside "The replacer in this example is not 100% correct (depending on your definition of "duplicate"). But the concept stands: Use a custom replacer, and keep track of the parsed object values." – Ramsay 1/7, 2014 at 16:52

Don't use this indeed. It strips out every duplicate object (which isn't a circular dependency) and is hellishly slow by checking every seen object. – Sacrificial 10/9, 2014 at 9:43

The GC concern here is arguably redundant. If this is run as a single script then script immediately terminates. If this is encapsulated inside a function for implementation then cache will be unreachable developer.mozilla.org/en-US/docs/Web/JavaScript/… – Asiatic 18/11, 2014 at 16:14

Note that IE 8 does not support Array.prototype.indexOf(). You may need to polyfill. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Octennial 17/3, 2015 at 21:43

@AndriMöll Pretty sure Rob's just concisely demonstrating custom replacers, which he's done very well. Preston's comment points to some Crockfordian code that is live-fire robust, if that's what you're after. But the concept is the same. – Mckamey 27/8, 2015 at 18:28

@ruffin: Since making that comment, I've taken the JSON Stringify Safe lib from Isaac and rewrote it: github.com/isaacs/json-stringify-safe. I'm not sure what the supposedly live-fire robust Crockford code does. It looks overly complicated and seems to do the same poor linear check that I warned against above. – Sacrificial 28/8, 2015 at 7:10

@AndriMöll using your stringifier and passing in window I still get Error: Permission denied to access property "toJSON" , it's funny cause it works with any other cyclic test obj but not window or 'document! could there be that there is an intentional limitation placed on the JSON.stringify` that inhibits it from executing certain objects? – Nell 17/10, 2015 at 0:35

@SabaAhang: Presumably one of the global objects you're stringifying has a toJSON that throws. FYI: By passing in window you'll be stringifying every global variable. Probably not a good idea. – Sacrificial 17/10, 2015 at 6:22

@ruffin: The linear check is worthy of mocking no matter who writes it. ;-) See the code related to the objects array and the comment above it: «This is a hard way, linear search that will get slower as the number of unique objects grows.» – Sacrificial 17/10, 2015 at 6:25

I was using this function without flushing the cache, and this gave very unexpected results. Saving the next guy some headache, i took the liberty to make the cache var local. – Poultice 4/4, 2017 at 12:26

This is correct, but there is a better solution using Map! We can make this more performant using a hashmap, see: https://mcmap.net/q/36423/-how-can-i-print-a-circular-structure-in-a-json-like-format – Hemialgia 14/1, 2018 at 22:6

Small addition helped me reduce useless for debug-purpose info: if( key.startsWith('_') ) { return; } – Sherylsheryle 10/8, 2018 at 16:9

@WebBrother I know exactly what your problem is, I have known about this situation for years, I just created a fix for this, please try it out: github.com/ORESoftware/safe-stringify, look for stringifyDeep, try it on your object and see if t works for you. – Hemialgia 8/12, 2018 at 23:10

@RobW this solution is improved with the try/catch block you added recently, but I found another limitation, see this gist please: gist.github.com/ORESoftware/10bd74e27728a2aa764df4d6c6ecada8 – Hemialgia 8/12, 2018 at 23:26

Isn't using indexOf for each element awfully inefficient (like exponentially)? Wouldn't it be wieser to use var cache = new Set() and cache.has(value) instead? – Hast 11/12, 2018 at 19:4

in Arrays it just works fine for the first element then all elements become null – Plating 16/12, 2018 at 11:25

Note: an edit to this question by @funrob in May 2018 fixed the issue with some items being discarded; I reverted the edit as it changed the substance of the answer (and made the part of the answer that referenced the issue nonsensical, as well as some of the comments), but the fix is to replace the return; statement with try { return JSON.parse(JSON.stringify(value)); } catch (error) { return; } – Turtleneck 7/6, 2019 at 21:0

This doesnt work if. obj1 = {}; obj2 = {foo:obj, bar:obj} The stringify removes bar because it exists in cache but it is not cyclic. – Witticism 25/3, 2020 at 12:1

magnificent answer, this is terse and helped me as well. – Forge 11/2, 2021 at 6:21

@AndriMöll Over five years later, I notice that I stand corrected. ;^) Your "circular stringify" solution does seem much better than Crockford's in exactly the ways you describe. He's a smart dude, so I'm worried there's something I've missed, but until (and if!) then, a sincere thanks. – Mckamey 4/4, 2022 at 18:49

Y

912

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...

Yellows answered 21/8, 2013 at 9:54 Comment(18)

util is a built-in module, you do not have to install it. – Flea 15/2, 2014 at 4:55

console.log(util.inspect(obj)) – Lemmy 25/11, 2014 at 18:42

This was a great suggestion! Thanks so much! I never thought seeing a console logged object would be so satisfying, but it was as if you broke all the objs open for me now to work with. – Thicken 1/12, 2014 at 5:54

Note that if for some reason you need to use JSON.stringify, you CANNOT USE util.inspect, because it outputs a string, and not an object. – Webfoot 20/3, 2015 at 8:56

One more tip about this: I use util.inspect with the following arguments, console.log(util.inspect(object, false, 10, true)); the second argument is for setting showHiddenProperties to false, the 10 is to tell it to dig into the object up to 10 levels deep and the last 'true' is to ask it to colorize the output. reference: docs.nodejitsu.com/articles/getting-started/… – Embassy 17/8, 2015 at 13:23

@Flea it is built-in, but you still have to load the module var util = require('util'); – Paving 6/9, 2015 at 21:26

Don't be a dunce like me, its just obj_str = util.inspect(thing), NOT <s>garbage_str = JSON.stringify(util.inspect(thing))</s> – Centreboard 21/11, 2016 at 22:25

Do note that util.inspect does not always return valid JSON. For example util.inspect(new Error('This is an example error')) – Brain 28/1, 2017 at 10:50

This is much better than mucking around with checking types. Why can't stringify just work like this? If it knows there's a circular reference, why can't it just be told to ignore it??? – Wobbling 5/3, 2018 at 14:45

Albeit being built-in, you must import it with either import * as util from 'util' or var util = require('util'). To use it, simply call console.log(util.inspect(myObject)). Also be aware that you can pass additional parameters to inspect(myObject[, options: {showHidden, depth, colors, showProxy, ...otherOptions}]). – Kalimantan 2/7, 2018 at 9:12

OMG it works! cb(require('util').inspect(sequelize)) thank you so much! – Brettbretz 23/12, 2018 at 21:39

I imported this into my codebase and it added almost a thousand lines of code – Parishioner 12/1, 2019 at 1:40

Just wanted point out that util.insect() will NOT produce valid Json string... so it is kind of different from JSON.stringify() – Mandalay 3/4, 2019 at 6:9

util.inspect() didn't work for me. It introduces some return characters which could be removed with string.replace(). So I just converted it to new object with Object.assign() (it happened with firebase firestore data) – Tintype 30/6, 2019 at 11:47

This was very helpful thank you! Here is an example with the options that prints everything, in case you are debugging a large object. let inspectOptions = {showHidden: false, depth:null, maxArrayLength: null }; let returnVal = util.inspect(thing,inspectOptions);//Debug – Earl 26/2, 2020 at 22:29

You don't need the 2nd import, since you are referring directly to inspect using util.inspect(). – Newspaper 10/4, 2020 at 21:38

Note: util.inspect will only indicate [Circular] if the "depth" property is large enough to contain the entire cycle; hence a = {}; a.b = {}; a.b.c = {}; a.b.c.d = {}; a.b.c.d.e = a; util.inspect(a) will print { b: { c: { d: [Object] } } } despite the circular reference, but util.inspect(a, {depth: 3}) will display [Circular] – Accustomed 13/4, 2020 at 22:33

@Centreboard not sure what you mean by that. These docs say you can do console.log(inspect(obj): nodejs.org/en/knowledge/getting-started/how-to-use-util-inspect – Hand 28/10, 2021 at 20:36

R

758