Pass a JavaScript function through JSON

Question

I have a server side Python script that returns a JSON string containing parameters for a client side JavaScript.

# Python
import simplejson as json

def server_script()
  params = {'formatting_function': 'foobarfun'}
  return json.dumps(params)

This foobarfun should refer to a JavaScript function. Here is my main client side script

// JavaScript
function client_script() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, async=true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      options = JSON.parse(xhr.responseText);
      options.formatting_function();
    }
  };
  xhr.send(null);
}

function foobarfun() {
  //do_something_funny_here...
}

Of course, options.formatting_function() will complain that "a string is not callable" or something to that effect.

Upon using Chrome's Inspect Element, under the Resources tab, and navigating the left sidebar for XHR > query, I find that client_script interprets options as below. foobarfun is seen as a string.

// JavaScript
options = {"formatting_function": "foobarfun"}

I would have liked client_script to see options as

// JavaScript
options = {"formatting function": foobarfun}

Of course, doing the following within Python will have it complaining that it doesn't know anything about foobarfun

# Python
params = {'formatting_function': foobarfun}

QUESTION:
How should I prepare my JSON string from the server side so that the client script can interpret it correctly? In this case, I want foobarfun to be interpreted as a function object, not as a string.

Or maybe it's something I should do on the client side?

Answer 1

There's nothing you can do in the JSON to get the result you want because JSON has no concept of functions, it's purely a data notation. But there are things you can do client-side.

If your foobarfun function is a global function (which I would recommend against, we'll come to that), then you can call it like this:

window[options.formatting_function]();

That works because global functions are properties of the window object, and you can access properties either by using dotted notation and literals (window.foobarfun), or by using bracketed notation and strings (window["foobarfun"]). In the latter case, of course, the string doesn't have to be a string literal, it can be a string from a property -- your options.formatting_function property, for instance.

But I don't recommend using global functions, the window object is already very crowded. Instead, I keep all of my functions (or as many as possible, in some edge cases) within a master scoping function so I don't add anything to the global namespace:

(function() {
    function foobarfun() {
    }
})();

Now, if you do that, you can't access foobarfun on window because the whole point of doing it is to avoid having it be on window. Instead, you can create your own object and make it a property of that:

(function() {
    var myStuff = {};

    myStuff.foobarfun = foobarfun;
    function foobarfun() {
    }

    function client_script() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, async=true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          options = JSON.parse(xhr.responseText);
          myStuff[options.formatting_function]();   // <== using it
        }
      };
      xhr.send(null);
    }
})();

Frequently, rather than this:

myStuff.foobarfun = foobarfun;
function foobarfun() {
}

you'll see people write:

myStuff.foobarfun = function() {
};

I don't recommend that, either, because then your function is anonymous (the property on myStuff that refers to the function has a name, but the function doesn't). Giving your functions names is a good thing, it helps your tools help you (showing you the names in call stacks, error messages, etc.).

You might also see:

myStuff.foobarfun = function foobarfun() {
};

and that should be valid, it's correct JavaScript. But unfortunately, various JavaScript implementations have various bugs around that (which is called a named function expression), most especially Internet Explorer prior to IE9, which will create two completely different functions at two different times.

All of that said, passing the names of functions around between the client and server usually suggests that you want to step back and look at the design again. Data should drive logic, but not in quite such a literal way. That said, though, there are definitely valid use cases for doing this, you may well have one in your situation.

Answer 2

There is a trick you can do. Analyzing the code of the json module in python, I notice that it is possible to make the serializer believe that it is an int what is serializing that way __str__ method will be executed.

import json

class RawJS(int):
    def __init__(self):
        self.code = "null"
    def __repr__(self):
        return self.code
    def __str__(self):
        return self.__repr__()
    @classmethod
    def create(cls, code):
        o = RawJS()
        o.code = code
        return o


js = RawJS.create("""function() {
    alert("hello world!");
}""")

x = {
    "func": js,
    "other": 10
}

print json.dumps(x)

the output is:

{"other": 10, "func": function() {
    alert("hello world!");
}}

The disadvantage of this method is that the output is not a valid JSON in python so it can't be deserialized, but it is a valid javascript.

Answer 3

This question seems like it may be helpful for you:

How to execute a JavaScript function when I have its name as a string

I think what I would do is store references to these methods in an object literal, and then access them through properties.

For example, if I wanted to call foobarfun, among other functions

var my_functions = {
   foobarfun: function(){

   },
   ...
};

...

var my_fn = my_functions[options.formatting_function];
my_fn();

Answer 4

may be you can think the return string as javascript not json, by set MIME type text/javascript

Answer 5

I'm in the same situation (python backend, needing to pass a JS function through JSON to frontend).

And while the answers here are honestly mind-blowing, I'm asking myself whether passing a javascript function that needs to designed in python and snuck into a JSON is the right answer, from a design perspective.

My specific scenario I need to tell JS how to format a string (is it a percentage, or does it need unitary breakdown such as thousands, millions etc)

And I'm finding it's cleaner to just do: python:

chart = {
    y_axis: {
        "formatter" : "percent"
    }    
}

JS:

format_type = chart["y_axis"]["formatter"]
switch(format_type) {
    case "percent":
        format_func = (value) => value.toFixed(0) +'%';
        break;
}
    
chart["y_axis"]["formatter"] = format_func

I find this is overall cleaner than attempting to define your JS functions in Python. It's also more decoupled than passing a specific function name from python to JS

Which I guess it's quite similar to @jkeesh's solution

Answer 6

I don't know whether it's possible to trick Python's JSON serializer to do what you want, but you can use eval() function to execute any JavaScript code stored in a string variable.

Answer 7

Well I am not a Python expert but I know some java script. From server you can pass the information to client only as string. If in any case you want to pass any java script function then you can pass that function name as string and evaluate that string on client side.

Ex. If you passes xyz as string from server and on client side you call
var funcName = "xyz"; // pursuing that variable would pass here some how
eval (funcName); // This line would make a call to java script function xyz

Hint: You can think of java script eval utility as a reflection utility in java.

Thanks shaILU