Question

I have the below JSON (been snipped for space), as you can see in the “test” and “tooltip” I have a property that needs to contain a function “formatter” (note this JSON is read in from an XML file and converted to JSON in .NET)

{
   "test": {
      "formatter": function(){return '<b>'+ this.point.name +'<\/b>: '+ this.y +' %';}
   },
   "title": {
      "align": "center", 
      "text": "Your chart title here" 
   },
   "tooltip": {
      "formatter": function(){return '<b>'+ this.point.name +'<\/b>: '+ this.y +' %';}
   } 
}

Unfortunatly I’m getting an error on the ASPX page that produces the JSON file

There was an error parsing the JSON document. The document may not be well-formed.

This error is due to the fact that the bit after the “formatter” is not in quotation marks as it thinks it’s a string. but If I put a string around it then the front end html page that uses the JSON doesn’t see the function.

Is it possible to pass this as a function and not a string?

Many thanks.

---

Edit:

Thanks for the quick replys. As I said I know that the above isn’t correct JSON due to the fact that the “function(){…}” part isn’t in quote marks. The front end that reads the JSON file is 3rd party so I was wondering how I could pass the function through, I understand about the problems of injection (from a SQL point of view) and understand why it’s not possible in JSON (not worked with JSON before).

Answer 1

If you passed it as a string you could use Javascripts EVAL function, but EVAL is EVIL.

What about meeting it half way and using Object Notation format ?

This is a template jquery plugin that I use at work, the $.fn.extend shows this notation format.

/*jslint browser: true  */
/*global window: true, jQuery: true, $: true */

(function($) {

    var MyPlugin = function(elem, options) {

        // This lets us pass multiple optional parameters to your plugin
        var defaults = {
            'text' : '<b>Hello, World!</b>', 
            'anotherOption' : 'Test Plugin'
        };

        // This merges the passed options with the defaults
            // so we always have a value
        this.options = $.extend(defaults, options);
        this.element = elem;
    };

    // Use function prototypes, it's a lot faster.
    // Loads of sources as to why on the 'tinternet
    MyPlugin.prototype.Setup = function()
    {
        // run Init code
        $(this.element).html(this.options.text);
    };

    // This actually registers a plugin into jQuery
    $.fn.extend({

        // by adding a jquery.testPlugin function that takes a 
            // variable list of options
        testPlugin: function(options) {

            // and this handles that you may be running
                    // this over multiple elements
            return this.each(function() {
                var o = options;

                // You can use element.Data to cache 
                            // your plugin activation stopping 
                            // running it again;
                // this is probably the easiest way to 
                            // check that your calls won't walk all 
                            // over the dom.
                var element = $(this);
                if (element.data('someIdentifier'))
                {
                    return;
                }

                // Initialise our plugin
                var obj = new MyPlugin(element, o);

                // Cache it to the DOM object
                element.data('someIdentifier', obj);

                // Call our Setup function as mentioned above.
                obj.Setup();
            });
        }
    });
})(jQuery);