Stringify (convert to JSON) a JavaSript object with circular reference

Question

I have got a JavaScript object definition that contains a circular reference i.e; it has a property that references the parent object.

It also has functions that I don’t want to be passed through the server. How would I serialize and deserialize these objects?

I have tried using stringify method but it is throwing an error like this:

TypeError: Converting circular structure to JSON

This is my code:

function finger(xid, xparent){

    this.id = xid;

    this.xparent;

    //other attributes

}

function arm(xid, xparent){

    this.id = xid;

    this.parent = xparent;

    this.fingers = [];

    //other attributes

    this.moveArm = function() {

        //moveArm function details - not included in this testcase

        alert("moveArm Executed");

    }

}

 function person(xid, xparent, xname){

    this.id = xid;

    this.parent = xparent;

    this.name = xname

    this.arms = []

    this.createArms = function () {

        this.arms[this.arms.length] = new arm(this.id, this);

    }

}

function group(xid, xparent){

    this.id = xid;

    this.parent = xparent;

    this.people = [];

    that = this;

    this.createPerson = function () {

        this.people[this.people.length] = new person(this.people.length, this, "someName");

        //other commands

    }

    this.saveGroup = function () {

        alert(JSON.stringify(that.people));

    }

}

This is a test case that I have created for this question. There are errors within the code but essentially I have objects within objects, and a reference passed to each object to show what the parent object is when the object is created. Each object also contains functions, which I don’t want to be stringified. I just want the properties such as the Person.Name .

How do I serialize before sending it to the server and deserialize it assuming that the same JSON is passed back?

Answer 1

Circular structure error occurs when you have a property of the object which is the object itself directly (obj->obj) or indirectly (obj->obj1->obj1).

To avoid the error message, tell JSON.stringify what to do when it encounters a circular reference. For example, if you have a person pointing to another person, which may or may not point to the original person, do the following:

JSON.stringify( that.person, function( key, value) {

  if( key == 'parent') { return value.id;}

  else {return value;}

})

The second parameter to stringify is a filter function. Here the second parameter to stringify is a filter function. Here it simply converts the referred object to its ID.

You can test with the following:

function Person( params) {

  this.id = params['id'];

  this.name = params['name']; 

  this.father = null;

  this.fingers = [];

  // etc.

}

var me = new Person({ id: 1, name: 'Luke'});

var him = new Person( { id:2, name: 'Darth Vader'});

me.father = him; 

JSON.stringify(me); // so far so good

him.father = me; // time travel assumed :-)

JSON.stringify(me); // "TypeError: Converting circular structure to JSON"

// But this should do the job:

JSON.stringify(me, function( key, value) {

  if(key == 'father') { 

    return value.id;

  } else {

    return value;

  };

});

Choose a different attribute name to “parent” as it is a reserved word in many languages.

Want to be a full stack developer? Check out the full stack developer course from Intellipaat.