how to pass a function name via JSON and call it in javascript/jQuery?

Question

I have a JSON string which includes a function I need to call.

My JSON looks like this:

{  
    "type":"listview",
    // the function I would like to call
    "content":"dynoData.getRetailers()",
    "custom_classes":["","nMT pickList","",""],
    "lib":"static_listview.html",
    "tmp":"tmp_listview_inset",
    "lang":"locale_search",
    ...

I'm using this to assemble a jQuery Mobile listview on the client. To get the dynamic data, I need to call dynoData.getRetailers().

However I'm struggling to make the call :-)

This is what I'm trying:

var dyn = $.parseJSON( passed_JSON_string ),
    content = dyn.content;

I had hoped calling it would trigger the function but it just returns the function name as a string.

Question:
How can trigger the actual function?

Thanks!

EDIT:
I'm putting the JSON string on the HTML element on the actual page, which I will replace with the element I'm building. Here is the HTML:

<ul data-template="true" data-config='{  
    "type":"listview",
    "content":"dynoData.getRetailers()",
    "custom_classes":["","nMT pickList","",""],
    "lib":"static_listview.html",
    "tmp":"tmp_listview_inset",
    "lang":"locale_search",
    "theme":"c",
    "filter":"true"
    }'></ul>

I could put all of these into data- attributes, but that would be messy...

Solution: This worked:

1) change JSON to:

..."method":"getRetailers", ...

2) call from Javascript:

content = dynoData[ dyn.method ]();

Thanks everyone!

Answer 1

Assuming the function is always part of the dyn object you can use notation like following to call a function:

dyn['dynoData']['getRetailers']();

So if you are able to adjust json you could send back something like:

"content":{ "mainObject": "dynoData" , "method" :"getRetailers"}

And translate it to your dynamic function using variables:

  dyn[content.mainObject][content.method]();

As an example using jQuery try using the following :

$('div')['hide']();

Which is the same as :

$('div').hide()

Answer 2

As charlietfl pointed out you can use object notation to call functions. For your case you have to get rid off () and split it, then call it like this;

jQuery(function($) {
    var temp = $('ul').data('config').content.replace(/\(\)/g, '').split('.');
    window[temp[0]][temp[1]]();
});

However this could solve your problem, if you think about future, you have to extend it a little bit. This way even you don't know the depth, you can call it anyway;

jQuery(function($) {
    var temp = $('ul').data('config').content.replace(/\(\)/g, '').split('.'), func, i, il = temp.length;
    for(i = 0; i < il; i++) {
        if(func == null) {
            func = window[temp[i]];
            continue;
        }
        func = func[temp[i]];
    }
    func();
});