Convert javascript array with JavaScript functions inside to json and back

Question

I've got a JavaScript Array/Object containing functions eg

var map = [function(){ alert('test') }, function(){ alert('test2') }];

How would I convert this array to JSON and back to useable JavaScript code?

Should I use eval or pre-create these functions and then load them using window["functionname"]

FYI: If you have a function inside of an Array, it can not be JSON. — epascarello, Sep 08 '15 at 20:21
@epascarello Yes I know that, thats why I'm trying to find a way to convert it to JSON like making it a string and then converting it back to executeable JavaScript — Stijn Bernards, Sep 08 '15 at 20:22
So I could use Ajax or Get to retrieve the array with the functions from a remote directory — Stijn Bernards, Sep 08 '15 at 20:23
So why don't you just load a JavaScript file with the methods in it? — epascarello, Sep 08 '15 at 20:23
How is this array being generated? Why not just put the functions into a `.js` file and then load that? — gen_Eric, Sep 08 '15 at 20:24
@RocketHazmat If I load a JS file with I guess getScript? could I call a var/array I instanced in that file? — Stijn Bernards, Sep 08 '15 at 20:25
Yes you can. =D http://stackoverflow.com/questions/19737031/loading-scripts-after-page-load — azium, Sep 08 '15 at 20:28
@azium Oh thats really cool looks like I haven't looked around enough, thanks! — Stijn Bernards, Sep 08 '15 at 20:31

Andrew Mairose · Accepted Answer · 2015-09-08T21:01:28.100

Here is a way you could do it.

For converting to JSON, you could do this:

//your original map
var map = [function(){ alert('test') }, function(){ alert('test2') }];
//convert it to a string
var str = map.toString();
//add the string to a javascript object
var obj = {funcArrStr: str};
//convert that object to json
var json = JSON.stringify(obj);

Then for parsing, you could do this:

var json = /* get json from server side */;
//parse the json
var parsed = JSON.parse(json);
//pull out the string from the parsed object
var funcArrStr = parsed.funcArrStr;
//wrap it in brackets [] and eval it to convert back to array
var evaled = eval('[' + parsed.funcArrStr + ']');

Run the snippet below and inspect your browser's javascript console for a demo.

var map = [function(){ alert('test') }, function(){ alert('test2') }];
console.log('map:');
console.log(map);

var str = map.toString();
console.log('convert map to string:');
console.log(str);

var obj = {funcArrStr: str};
console.log('put it in an object:');
console.log(obj);

var json = JSON.stringify(obj);
console.log('convert to json string:');
console.log(json);

var parsed = JSON.parse(json);
console.log('parse json string:');
console.log(parsed);

var funcArrStr = parsed.funcArrStr;
console.log('pull out string from object');
console.log(funcArrStr);

var evaled = eval('[' + parsed.funcArrStr + ']');
console.log('wrap in [] and eval:');
console.log(evaled);

EDIT in response to comment

How would eval affect my javascript speed if I have lets say an array containing a few hundred functions?

Test it out. Assigning the string, calling eval to create the array of functions, and calling eval on over 300 functions in the snippet below usually takes around 2 milliseconds in my browser. If you have larger functions it will most likely take a little longer, but test it out and time it to see if the load times are reasonable.

var start = new Date().getMilliseconds();

var funcStr = "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }," +
    "function() { alert(test); }";

var functions = eval('[' + funcStr + ']');

for (var i = 0; i < functions.length; i++) {
  eval(functions[i]);
}
var end = new Date().getMilliseconds();
alert('Evals complete in ' + (end-start) + ' milliseconds');

This works really cool but how would eval affect my javascript speed if I have lets say an array containing a few hundred functions? — Stijn Bernards, Sep 08 '15 at 20:42

Convert javascript array with JavaScript functions inside to json and back

1 Answers1