Encountering a JavaScript toJSON custom method causing a StackOverflow error

Question

Encountering a JavaScript toJSON custom method causing a StackOverflow error

Unique Scenario

Upon discovering this answer, a new idea struck me - creating an object from a JSON literal.

This led me to believe I could do the opposite using the handy JSON method: JSON.stringify(myObject).

Curious, I proceeded as follows:

function MyObject(id, value, desc)
{
  this.id = id;
  this.value = value;
  this.desc = desc;
  this.toJSON = function()
  {
    return JSON.stringify(this);
  }

}

However, upon running this code (demo), it threw a Maximum call stack size exceeded error.

After some searching, I came across two resources explaining this behavior:

the JSON.stringify() method on MDN.
the JSON in Javascript article on JSON.org

It seems that .toJSON overrides the .stringify method, leading to a loop when called within itself.

Thought-provoking Questions

(general) Why was the design choice made for toJSON? Is it a reserved or special keyword?
(specific) To resolve the stack overflow issue, I opted to rename .toJSON to .display, which felt somewhat inelegant. Are there alternative solutions?

javascript json oop design-patterns

Answer 1

Answer №1

Seems like the issue is related to toJSON being semi-reserved: stringify checks if the object has a method called toJSON and then attempts to call it to stringify the result.

A possible workaround could be: (Although the reliability of this code is uncertain)

var obj = {
    value: 1,
    name: "John",
    toJSON: function() {
        var ret,
            fn = this.toJSON;

        delete this.toJSON;

        ret = JSON.stringify(this);

        this.toJSON = fn;

        return ret;
    }
}

Example:

obj.toJSON(); // "{\"value\":1,\"name\":\"John\"}"
obj.lastName = "Smith";
obj.toJSON(); // "{\"value\":1,\"name\":\"John\",\"lastName\":\"Smith\"}"

Alternatively, using a closure may provide a cleaner solution: (Which I believe is safe)

var obj = {
    value: 1,
    name: "John",
    toJSON: (function() {
        function fn() {
            var ret;
            delete this.toJSON;

            ret = JSON.stringify(this);

            this.toJSON = fn;

            return ret;
        }
        return fn;
    })()
}

After reading @filmor's comment, I considered another approach to address this issue. Although not elegant, it gets the job done.

By utilizing Function.caller, I can determine if fn is invoked using JSON.stringify

var obj = {
    value: 1,
    name: "John",
    toJSON: (function() {
        return function fn() {
            var ret;

            delete this.toJSON;

            ret = JSON.stringify(this);

            if ( fn.caller === JSON.stringify ) {
                ret = JSON.parse( ret );
            }

            this.toJSON = fn;

            return ret;
        }
    })()
}

Answer 2

Seems like the issue is related to toJSON being semi-reserved: stringify checks if the object has a method called toJSON and then attempts to call it to stringify the result.

A possible workaround could be: (Although the reliability of this code is uncertain)

var obj = {
    value: 1,
    name: "John",
    toJSON: function() {
        var ret,
            fn = this.toJSON;

        delete this.toJSON;

        ret = JSON.stringify(this);

        this.toJSON = fn;

        return ret;
    }
}

Example:

obj.toJSON(); // "{\"value\":1,\"name\":\"John\"}"
obj.lastName = "Smith";
obj.toJSON(); // "{\"value\":1,\"name\":\"John\",\"lastName\":\"Smith\"}"

Alternatively, using a closure may provide a cleaner solution: (Which I believe is safe)

var obj = {
    value: 1,
    name: "John",
    toJSON: (function() {
        function fn() {
            var ret;
            delete this.toJSON;

            ret = JSON.stringify(this);

            this.toJSON = fn;

            return ret;
        }
        return fn;
    })()
}

After reading @filmor's comment, I considered another approach to address this issue. Although not elegant, it gets the job done.

By utilizing Function.caller, I can determine if fn is invoked using JSON.stringify

var obj = {
    value: 1,
    name: "John",
    toJSON: (function() {
        return function fn() {
            var ret;

            delete this.toJSON;

            ret = JSON.stringify(this);

            if ( fn.caller === JSON.stringify ) {
                ret = JSON.parse( ret );
            }

            this.toJSON = fn;

            return ret;
        }
    })()
}

Answer 3

Answer №2

Is the method toJSON considered reserved?

I'm uncertain of its reservation status, but one example is the native Date object utilizing toJSON to generate a formatted date string:

(new Date()).toJSON();           // -> "2019-05-22T09:30:42.123Z"
JSON.stringify({d: new Date()}); // -> {"d":"2019-05-22T09:30:42.123Z"}"

A simple workaround:

Create a custom stringify function that disregards any toJSON methods (it can be incorporated into the existing global JSON):

JSON.customStringify = function (obj) {

    var fn = obj.toJSON;
    obj.toJSON = undefined;
    var json = JSON.stringify(obj);
    obj.toJSON = fn;
    return json;
}

Now this can be easily applied to all objects:

function CustomObject(id, value, desc)
{
  this.id = id;
  this.value = value;
  this.desc = desc;
  this.toJSON = function()
  {
    return JSON.customStringify(this);
  }
}

To enhance simplicity further, include:

JSON.customStringifyMethod = function () {

    return JSON.customStringify(this);
}

Objects can now be structured as follows:

function CustomObject(id, value, desc)
{
  this.id = id;
  this.value = value;
  this.desc = desc;
  this.toJSON = JSON.customStringifyMethod;
}

Answer 4

Is the method toJSON considered reserved?

I'm uncertain of its reservation status, but one example is the native Date object utilizing toJSON to generate a formatted date string:

(new Date()).toJSON();           // -> "2019-05-22T09:30:42.123Z"
JSON.stringify({d: new Date()}); // -> {"d":"2019-05-22T09:30:42.123Z"}"

A simple workaround:

Create a custom stringify function that disregards any toJSON methods (it can be incorporated into the existing global JSON):

JSON.customStringify = function (obj) {

    var fn = obj.toJSON;
    obj.toJSON = undefined;
    var json = JSON.stringify(obj);
    obj.toJSON = fn;
    return json;
}

Now this can be easily applied to all objects:

function CustomObject(id, value, desc)
{
  this.id = id;
  this.value = value;
  this.desc = desc;
  this.toJSON = function()
  {
    return JSON.customStringify(this);
  }
}

To enhance simplicity further, include:

JSON.customStringifyMethod = function () {

    return JSON.customStringify(this);
}

Objects can now be structured as follows:

function CustomObject(id, value, desc)
{
  this.id = id;
  this.value = value;
  this.desc = desc;
  this.toJSON = JSON.customStringifyMethod;
}

Encountering a JavaScript toJSON custom method causing a StackOverflow error

Answer №1

Answer №2

Similar questions

What is the best way to send data to an API controller using AJAX in an MVC framework?

Exploring MongoDB through proxyquire

Enhancing React URLs

Display Material checkbox based on a condition

Icon for TypeScript absent from npm package listings

Utilizing JavaScript to showcase information retrieved from the database

What are the steps to address unhandled promise rejections?

What is the best way to extract all <tr> elements from a <tbody> and then convert them into a String?

I am retrieving data from a service and passing it to a component using Angular and receiving '[object Object]'

Send a single piece of data using AJAX in Flask

JS Nav Dots are not activating the Active Class

What could be the reason for the malfunction of this AngularJS data binding feature?

Nextjs optimizing page caching to reduce unnecessary rendering

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

How can you retrieve the current user in express.js when incorporating socket.io?

Node.js's async functions seem to be running sluggishly

Repeating X and Y Axis Labels on Highcharts

Ways of assigning a null value to a key in a JSON body request

Issue with Redirecting in React: REST requests are not successful

Creating an Editor for Input Text Field in HTML: A Step-by-Step Guide