Calling function defined in an object

Question

I have an object that defines the name and parameters of a function to be called in the click event of a page element.

object_array = [
    {
       id: "id1",
       onclick: "load_file(filename.php);",
    },

    {
       id: "id2",
       onclick: "open_url('http://url.com');",
    }
];

That information must be retrieved dynamically. I'd like in the click event to call the onclick function for a given object in the array.

$('element').click(function() {
      // call object.onclick
});

Seems that eval() is not a good choice. Is there a different way of calling that function?

So object_array is retrieved from the server in JSON or similar? Or is it simply a literal embedded in your code? — Joey Adams
– Joey Adams, Commented May 16, 2012 at 0:48
Do you have any control over the objects in object_array? In other words, can you change the format of onclick into something reasonable? — mu is too short
– mu is too short, Commented May 16, 2012 at 0:53

Bergi · Accepted Answer · 2012-05-16 01:03:45Z

2

You should refactor the object_array to:

[{
    id: "id1",
    action: "load_file",
    url: "filename.php"
}, {
   id: "id2",
   action: "open_url",
   url: 'http://url.com'
}];

Then you can call it with:

var actions = {
    load_file: function(url) {
        ...
    },
    open_url: function(url) {
        ...
    },
    ...
};
object_array.forEach(function(ob) {
    $("#"+ob.id).click(function() {
        actions[ob.action](ob.url);
    });
});

If you have more complex arguments, you could also deliver an arguments array instead of url and use apply() on the function.

Or, if you just want a lookup-table of functions, use:

var object = {
    "id1": function() {
        load_file('filename.php');
    },
    "id2": function() {
        open_url('http://url.com');
    }
};
$('element').click(function() {
    object[this.id]();
});

edited May 16, 2012 at 1:03

answered May 16, 2012 at 0:58

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user823527 Over a year ago

The lookup-table of functions was enough for me. This was a good solution for me.

AlanFoster · Accepted Answer · 2012-05-16 01:17:40Z

2

Here's a working jsfiddle: http://jsfiddle.net/Zh6Fv/1/

Like so:

 object_array = [
        {
           id: "id1",
           // Encapsulate in an anonymous function
           onclick: function(){ load_file('filename.php'); },
        },
        {
           id: "id2",
           // Encapsulate in an anonymous function
           onclick: function(){ open_url('http://url.com'); },
        }
    ];

Then actually bind it it like this ::

$('element').click(obj.onclick);

Presumably you would be using it like this::

object_array.forEach(function(obj){
     // Note there is no need to wrap the obj.onclick
     // into another anonymous function anymore!
     $("#" + obj.id).click(obj.onclick);
});

Here's a working jsfiddle: http://jsfiddle.net/Zh6Fv/1/

edited May 16, 2012 at 1:17

answered May 16, 2012 at 0:56

AlanFoster

8,3245 gold badges38 silver badges52 bronze badges

7 Comments

user823527 Over a year ago

If I were to call the onclick inside a another function would this be function name() { object.onclick; }? Thanks.

AlanFoster Over a year ago

if you want to call it, then you call it like function name() { object.onclick(); } just like you would a normal function! :)

user823527 Over a year ago

My object array did not like the anonymous function within the object. It didn't like the onclick: function () {load_file('filename.php');},.

AlanFoster Over a year ago

@user823527 I've added a jsfiddle link for you

user823527 Over a year ago

This does work in the fiddle. But when called inside a function other than the click function, the object.onclick isn't done. function name() { object.onclick; } doesn't actually run the load_file() function.

|

shenhengbin · Accepted Answer · 2012-05-16 00:45:28Z

0

you can declare a function like

onclick : function()
{
   action(arguments);
}

answered May 16, 2012 at 0:45

shenhengbin

4,2941 gold badge26 silver badges33 bronze badges

Collectives™ on Stack Overflow

Calling function defined in an object

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related