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

Managing websites on Android when the keyboard is displayed

What could be causing the error in Angular Universal Server Side Rendering after deployment on Firebase Hosting?

Setting the maximum width for a JavaScript pop-up box

`Trigger a page reload when redirecting`

The JSON output is only displaying the final object in the array

What is the meaning of "bootstrapping" as it relates to Angular 2?

Unable to add new Instance Properties in Vue.js within a Laravel project

The Jquery Ajax call is prompting the download of a JSON file instead of entering the success block

Steps to define a JavaScript mixin in VueJS

Responsive design involves ensuring that web elements such as divs are properly aligned

Filtering an RXJS BehaviorSubject: A step-by-step guide

Unraveling the mystery of extracting special variables from HTML textarea input

Determine whether a directive possesses a specific attribute

Sending JSON data from Flutter to a fresh Stateful Widget

When it comes to the CSS `:visited` pseudo-class, I have

Jenkins: Access a variable stored in a JSON file and incorporate it into subsequent actions

Locate an element within an array of strings to refine the contents of a flatlist

Exploring the Evolution of jsAjaxForm from jQuery Version 2.1.3 to Version 3.2.1

Flask - Refreshing Forms Dynamically

The Javascript function call from the <img src="myFunction()"> is malfunctioning