Javascript: stringify object (including members of type function)

Question

I'm looking for a solution to serialize (and unserialize) Javascript objects to a string across browsers, including members of the object that happen to be functions. A typical object will look like this:

{
   color: 'red',
   doSomething: function (arg) {
        alert('Do someting called with ' + arg);
   }
}

doSomething() will only contain local variables (no need to also serialize the calling context!).

JSON.stringify() will ignore the 'doSomething' member because it's a function. I known the toSource() method will do what I want but it's FF specific.

Solution 1

You can use JSON.stringify with a replacer like:

JSON.stringify({
   color: 'red',
   doSomething: function (arg) {
        alert('Do someting called with ' + arg);
   }
}, function(key, val) {
        return (typeof val === 'function') ? '' + val : val;
});

Solution 2

A quick and dirty way would be like this:

Object.prototype.toJSON = function() {
  var sobj = {}, i;
  for (i in this) 
    if (this.hasOwnProperty(i))
      sobj[i] = typeof this[i] == 'function' ?
        this[i].toString() : this[i];

 return sobj;

};

Obviously this will affect the serialization of every object in your code, and could trip up niave code using unfiltered for in loops. The "proper" way would be to write a recursive function that would add the toJSON function on all the descendent members of any given object, dealing with circular references and such. However, assuming single threaded Javascript (no Web Workers), this method should work and not produce any unintended side effects.

A similar function must be added to Array's prototype to override Object's by returning an array and not an object. Another option would be attaching a single one and let it selectively return an array or an object depending on the objects' own nature but it would probably be slower.

function JSONstringifyWithFuncs(obj) {
  Object.prototype.toJSON = function() {
    var sobj = {}, i;
    for (i in this) 
      if (this.hasOwnProperty(i))
        sobj[i] = typeof this[i] == 'function' ?
          this[i].toString() : this[i];

    return sobj;
  };
  Array.prototype.toJSON = function() {
      var sarr = [], i;
      for (i = 0 ; i < this.length; i++) 
          sarr.push(typeof this[i] == 'function' ? this[i].toString() : this[i]);

      return sarr;
  };

  var str = JSON.stringify(obj);

  delete Object.prototype.toJSON;
  delete Array.prototype.toJSON;

  return str;
}

http://jsbin.com/yerumateno/2/edit

Solution 3

Something like this...

(function(o) {
    var s = "";
    for (var x in o) {
        s += x + ": " + o[x] + "\n";
    }
    return s;
})(obj)

Note: this is an expression. It returns a string representation of the object that is passed in as an argument (in my example, I'm passing the in an variable named obj).

You can also override the toString method of the Object's prototype:

Object.prototype.toString = function() {
    // define what string you want to return when toString is called on objects
}

Solution 4

JSONfn plugin is exactly what you're looking for.

http://www.eslinstructor.net/jsonfn/

--Vadim

Solution 5

It's impossible without the help of the object itself. For example, how would you serialize the result of this expression?

(function () {
  var x; 
  return {
      get: function () { return x; },
      set: function (y) { return x = y; }
    };
})();

If you just take the text of the function, then when you deserialize, x will refer to the global variable, not one in a closure. Also, if your function closes over browser state (like a reference to a div), you'd have to think about what you want that to mean.

You can, of course, write your own methods specific to individual objects that encode what semantics you want references to other objects to have.

View more solutions

Comments

[user113716]

I'll just leave a comment because I'm not offering a full solution. One thing that may help is that you can stringify a Function with a call to toString(). jsfiddle.net/HFMaz Not sure about cross-browser support.

[lincolnk]

this is asked regularly but i can't find anything relevant :\ why are do you need to serialize the function anyway? perhaps there's a better way to arrange your code?

[Yannick Deltroo]

This is for WYSIWYG project. Each Javascript object (with methods) defines the behavior of page components. The page contents (including JS behavior) has to be saved server-side, hence serialized.

[lincolnk]

how is the code created? it seems like you should have access to a string representation of all this at some earlier point in the process.

[Ivo Wetzel]

I hope that this isn't used by the wide public then... otherwise you'll have to make sure that there's no way I can XSS that thing.

[Adaptabi]

Great, except arrays are not serialized as arrays anymore.

[Justin]

What would the parse function look like? All of the functions are in strings so on parse we need to convert them back to functions.

[Julien Bérubé]

I ended up using JSON.stringify(myObject, function(key, val) { return (typeof val === 'function') ? '[function]' : val; }, 4); and it outputs really nice.

[MERT DOĞAN]

I have tested with my object that has function but it isn't working.