Creating a Dynamic JSON array with callbacks (Inner Closure Issue)

Question

Very tough to title this thing. I'm using a contextMenu plugin for jQuery.

http://joewalnes.com/2011/07/22/a-simple-good-looking-context-menu-for-jquery/

It can take an array of items so I can dynamically create the menu based on a JSON object I have established previously called "packages" with is no more than an array of JSON objects containing an id and a title. For example:

var packages = [{id:1,title:"One"},{id:2,title"Two"}];

As you might be able to tell from the example in the link I added, an "item" consists of, at minimum, a label and a callback function (which executes when the item is selected). So my first thought was to do this:

var itemsArr = new Array();
for(var i=0; i<packages.length; i++)
{
    itemsArr.push({label:packages[i].title, action:function(){myClickFunction(packages[i].id);}});
}
$("#myMenuThingie").contextPopup({title:"My Popup", items:itemsArr});

Now, I have verified that I can, infact pass an array to make this menu work properly. The problem, I think, is the inner closure issue. Because myClickFunction always gets the value of the last id, regardless of what gets clicked.

I found an article on "Immediately Invoked Function Expressions" here: http://benalman.com/news/2010/11/immediately-invoked-function-expression/, resulting in this modification:

for(var i=0; i<packages.length; i++)
{
    itemsArr.push({label:packages[i].title, action:(function(tempId){myClickFunction(tempId);})(packages[i].id)});
}

however, that method won't really work either because it immediately invokes those functions, not on click.

I am aware that I could try to use jQuery to find all the spans generated by the dropdown and apply click events that way, I'm just wondering if there is a way to create this array of objects with callbacks referencing the proper id. I'll also take suggestions for other contextMenu plugins if it allows me to dynamically apply items in a similar fashion.

Any thoughts?

Steve · Accepted Answer · 2013-09-17 18:27:06Z

1

I would probably create a standalone function to feed the packages into the array. Something like this:

var itemsArr = new Array();
function addToArray(package) {
    itemsArr.push({label:package.title, action:function(){myClickFunction(package.id);}});
} 
for(var i=0; i<packages.length; i++)
{
    addToArray(packages[i]);
}
$("#myMenuThingie").contextPopup({title:"My Popup", items:itemsArr});

answered Sep 17, 2013 at 18:27

Steve

8,6487 gold badges42 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

Creating a Dynamic JSON array with callbacks (Inner Closure Issue)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related