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

问题

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!

回答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()

回答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();
});

回答3:

Try ConversationJS. It makes dynamic calls pretty easy and its a great way to decouple your codebase: https://github.com/rhyneandrew/Conversation.JS

回答4:

JSON is purely data notation to be passed around so it is easily read and parsed, therefore it has no concept of functions. However, there are other ways of dealing with this and if you are starting to think that that is the only way to deal with your dilemma, then take a step back and examine your design. Instead of using this:

eval(yourCode);

Try this

var tempFun = new Function(yourCode);
tempFun();

来源：https://stackoverflow.com/questions/13792329/how-to-pass-a-function-name-via-json-and-call-it-in-javascript-jquery

标签

javascript

jquery

function

parameters

triggers