Skip to content

Instantly share code, notes, and snippets.

@cowboy
Created September 19, 2012 13:45
Show Gist options
  • Star 55 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save cowboy/3749767 to your computer and use it in GitHub Desktop.
Save cowboy/3749767 to your computer and use it in GitHub Desktop.
JavaScript: like JSON.stringify but handles functions, good for creating arbitrary .js objects?
var stringify = function(obj, prop) {
var placeholder = '____PLACEHOLDER____';
var fns = [];
var json = JSON.stringify(obj, function(key, value) {
if (typeof value === 'function') {
fns.push(value);
return placeholder;
}
return value;
}, 2);
json = json.replace(new RegExp('"' + placeholder + '"', 'g'), function(_) {
return fns.shift();
});
return 'this["' + prop + '"] = ' + json + ';';
};
var foo = {
a: function() { return 'a'; },
b: function() { return 'b'; },
'bar.baz': {
'omg ponies!!': function() { return 'c'; }
}
};
console.log(stringify(foo, 'foo'));
// this["foo"] = {
// "a": function () { return 'a'; },
// "b": function () { return 'b'; },
// "bar.baz": {
// "omg ponies!!": function () { return 'c'; }
// }
// };
@GlauberF
Copy link

GlauberF commented Nov 8, 2019

@cowboy and how to parse later?

Copy link

ghost commented Oct 28, 2020

Badass. Much better than passing a converter function to JSON.stringify, because with this, the resulting string is the JavaScript representation of the object, i.e. it can be used directly as javascript code with no need to parse.

@GlauberF
Copy link

@jspinoza3 how would you use the final result, without doing analysis and without using eval ()?

@cowboy
Copy link
Author

cowboy commented Oct 28, 2020

TBH I don't even remember what I used this for, 8 years ago. Probably nothing good 😂

Copy link

ghost commented Oct 28, 2020

I'm using it to generate custom JavaScript code for bookmarklets. Basically the goal is to have the end user be able to enter the parameters values they want into a web form and then it generates a link that they can drag into their bookmarks bar. As a toy example, suppose I had a bookmarklet that printed my name to the console. I could structure the bookmarklet code as a call to the method of an anonymous object like so:

javascript: (
{
    name: "Jeoffrey Spinoza",
    f()
    {
        console.log(this.name);
    }
}
).f();

Structuring the code like above may seam like a Rube Goldberg approach, but the advantage is, using that structure makes it easy to programmatically generate analogous code for printing someone else's name, because all I have to do in my code generation program is start with the anonymous object above, change the name property, stringify it, paste the two boilerplate lines on the top and bottom, and then provide the code to the user by storing it in a link's href.

var callable =
{
    name: "Jeoffrey Spinoza",
    f()
    {
        console.log(this.name);
    }
};
callable.name = "Jane Doe";
var janesBookmarkletCode = "javascript: ("+stringify(callable) + ").f();"
document.getElementById("bookmarkletLink").href = janesBookmarkletCode;

Of course the minor issue is, as it currently is written, the stringify function doesn't handle methods defined in the concise syntax above (without "function" keyword). I'm trying to work that out right now.

@GlauberF
Copy link

how cool, if you can get to the solution to your current problem with function, share

Copy link

ghost commented Oct 29, 2020

how cool, if you can get to the solution to your current problem with function, share

https://gist.github.com/jspinoza3/1805df875fe168833dddc3f7e1abbad7
^^handles concise method syntax and fat arrows.

@jeffreesta
Copy link

This stringify function is a custom implementation designed to stringify JavaScript objects, similar to JSON.stringify, but with the ability to handle functions within the object. It replaces slice master functions with a placeholder string during the stringification process and then restores them after the JSON string is created.

@justinfarrelldev
Copy link

Just wanted to comment that this function has saved me more than once!

@alexbodn
Copy link

alexbodn commented Apr 2, 2024

thanks a lot cowboy, javascript is more than json!

@alexbodn
Copy link

alexbodn commented Apr 2, 2024

how cool, if you can get to the solution to your current problem with function, share

https://gist.github.com/jspinoza3/1805df875fe168833dddc3f7e1abbad7 ^^handles concise method syntax and fat arrows.

the link is dead, but your code was enough for me now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment