lets say there's a list object properties are added to this list whereas the property name is a string id, and the value is another object

class List {
  constructor() {
    this.list = {}
  }
  addObj(id, obj) {
    this.list[id] = obj;
    --> console.log("current list: " + JSON.stringify(this.list))
  }
}

the issue is that in the console, this returns TypeError: Converting circular structure to JSON at the --> line

I understand the concept of circular references, but clearly im not understanding enough. Why can I not log/stringify this.list?

if id is a string "123456", and the value is obj, I expect this.list to be displayed as: { '123456': obj }

lets say there's a list object properties are added to this list whereas the property name is a string id, and the value is another object

class List {
  constructor() {
    this.list = {}
  }
  addObj(id, obj) {
    this.list[id] = obj;
    --> console.log("current list: " + JSON.stringify(this.list))
  }
}

the issue is that in the console, this returns TypeError: Converting circular structure to JSON at the --> line

I understand the concept of circular references, but clearly im not understanding enough. Why can I not log/stringify this.list?

if id is a string "123456", and the value is obj, I expect this.list to be displayed as: { '123456': obj }

• javascript
• object

• How are you calling addObj? – John Montgomery Commented Jul 26, 2019 at 22:31
• obj is an identifier not a value, the actual value that obj refers to must be either the same object as this, or a different object that has a reference to (a reference to (a reference to (...))) this or some other object in that chain. – Paul Commented Jul 26, 2019 at 22:32
• If any of the added elements contain a reference to the list itself, that would result in a circular structure, which cannot be represented as JSON. – IronMan Commented Jul 26, 2019 at 22:34
• let l1 = new List(); l1.addObj(1, {a: 11}); current list: {"1":{"a":11}}. Works as expected . – ford04 Commented Jul 26, 2019 at 22:36
• 1 I ran the exact code you mentioned and did not got any error (I just need to add a ' at the end o p2: 'value'). Are you sure there is no other info you are forgetting to mention? – Denis Commented Jul 26, 2019 at 22:47

1 Answer 1

You can't "fix" that in a sense if you can't change the underlying data structure of the objects you store but you can wrap the serialization with try/catch to save your program from crashing if not all of them have circular references. The reason why you get this issue is that one of the objects you pass as a second argument to addObj has a circular reference(s) to itself or to other objects that point to that object. For example:

const obj = {prop: 42};
const anotherObj = {prop: 24};
anotherObj.someRef = obj;
obj.someRef = anotherObj;
const list = new List();
list.addObj('some', obj);

Consequently, we get a runtime error saying we have circular references:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'someRef' -> object with constructor 'Object'
    --- property 'someRef' closes the circle

That's because JSON can't serialize cyclic data structures by design.

If that console.log statement has been added just for the debugging purposes, please, don't do that and use breakpoints in ChromeDevTools.