Stackoverflow error on Javascript toJSON custom method

Question

Scenario

After reading this answer I realized that I could create object starting from a JSON literal.

So I guessed that I could do the opposite just using this useful JSON method: JSON.stringify(myObject).

So I did as follow:

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

}

But when I run this stuff (demo) a Maximum call stack size exceeded error occurs.

After googling a bit, I found two references that explain this behaviour:

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

If I get right, .toJSON overrides the .stringify. So if the first one calls the second one a loop is generated.

Questions

(general) Why this design choice? toJSON is a kind of reserved of special keyword?
(specific) I solved the stackoverflow bug changing the .toJSON name into .display. Not so elegant. Is there another solution?

+1 for using the stackoverflow keyword. No, kidding, it's a good question. — gion_13
– gion_13, Commented Oct 9, 2012 at 8:52
Why do you use a custom toJSON method if there is nothing special? — Bergi
– Bergi, Commented Oct 19, 2012 at 13:22

Andreas Louv · Accepted Answer · 2012-10-09 10:32:34Z

6

Think it's because toJSON is semi reserved: stringify will check the object and see if it's has a method called toJSON and then try to call it to string the result.

A workaround can be: (Not sure about the reliablity of this code)

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

Usage:

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

Maybe using a clousure is a little prettier: (And then I think I can say it's 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;
    })()
}

So after reading @filmor's comment i thoght about another way to handle this. Not that pretty but it works.

Using Function.caller I can detect if fn is called 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;
        }
    })()
}

edited Oct 9, 2012 at 10:32

answered Oct 9, 2012 at 8:55

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

filmor Over a year ago

Found that out at roughly the same time as you (after crashing Firefox during the course ;)). One comment: If you do it like this you break normal JSON.stringify(obj), since it will interpret the object as a string and escape and add surrounding " chars.

Andreas Louv Over a year ago

@filmor I ran into the same problem. But think I found a solution using fn.caller

Alberto De Caro Over a year ago

Interesting, but quite a lot of stuff just to use toJSON intead of display :). Note that there is a non standard remark in the Function.caller page. Anyway, an elegant solution.

lrsjng · Accepted Answer · 2012-10-20 13:02:04Z

Question 1, is toJSON reserved?

I'm not sure if it reserved, but for example the native Date object uses toJSON to create a stringified date representation:

(new Date()).toJSON();           // -> "2012-10-20T01:58:21.427Z"
JSON.stringify({d: new Date()}); // -> {"d":"2012-10-20T01:58:21.427Z"}"

Question 2, an easy solution:

create your custom stringify function that ignores toJSON methods (you may add it to the already 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 it's very easy to use in all your objects:

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

To make it even more easy additionally add:

JSON.customStringifyMethod = function () {

    return JSON.customStringify(this);
}

Now your objects might look like:

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

Collectives™ on Stack Overflow

Stackoverflow error on Javascript toJSON custom method

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related