Passing array of objects generated dynamically to onclick handler

Question

I am generating an onclick handler dynamically and setting it using the attr method.

var originReference = "myDynamicString";
var stringArray = [];
stringArray.push("Data1");
stringArray.push("Data2");
var objArray = [];
objArray.push({name: "Category 1", y: 10});
objArray.push({name: "Category 2", y: 20});

onclickReference.attr("onclick", "drawChart('" + originReference + "',[" + stringArray + "],[" + objArray + "]); return false;");

With this code, the objArray is not being passed properly to the handler event as I am getting the error:

"SyntaxError: missing ] after element list".

Using just an array of strings (no JSON). The data is passed to the handler just fine.

How can I format my object array in the onclick handler?

I don't think you need to concatenate the vars. you can simply use drawChart(originReference,stringArray,jsonArray); — Thangadurai
– Thangadurai, Commented Sep 9, 2015 at 13:22
P.S. There is no "JSON array" anywhere in this code. Your jsonArray is just an array of objects. JSON is a string representation of data, that resembles JavaScript object/array syntax. If it's not a string, it's not JSON. — gen_Eric
– gen_Eric, Commented Sep 9, 2015 at 13:22
Thanks, I stand corrected. Changed the verbiage in the question. — kittyhawk
– kittyhawk, Commented Sep 9, 2015 at 14:17

Sharihin · Accepted Answer · 2015-09-09 13:23:01Z

2

You should use JSON.stringify to convert your javascript object to json string.

onclickReference.attr("onclick", "drawChart('" + originReference + "'," + JSON.stringify(stringArray) + "," + JSON.stringify(jsonArray) + "); return false;");

But as @Rocket Hazmat said, use onclick attribute is a bad way to do event binding.

answered Sep 9, 2015 at 13:23

Sharihin

15011 bronze badges

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

Comments

gen_Eric · Accepted Answer · 2015-09-09 14:56:38Z

2

Don't use onclick attributes to bind events. Use addEventListener to add events.

onclickReference.click(function(){
    drawChart(originReference, stringArray, jsonArray);
    return false;
});

EDIT: According to your comment, you are binding events in a loop. In that case you need to create a closure to "capture" the values of your variables.

Try this:

onclickReference.each(function(){
    // Define your variables inside this new scope
    var originReference = "myDynamicString";
    var stringArray = [];
    var objArray = [];

    this.click(function(){
        drawChart(originReference, stringArray, jsonArray);
        return false;
    });
});

edited Sep 9, 2015 at 14:56

answered Sep 9, 2015 at 13:21

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

3 Comments

kittyhawk Over a year ago

My onclickReference is populated like this: onclickReference = $(this).find("a");. Therefore, addEventListener throws a not a function error. If I reference $(this).find("a")[0]; my data doesn't seem to be there

gen_Eric Over a year ago

Didn't realize onclickReference was a jQuery object. In that case, it's just onclickReference.click(function(){...});.

kittyhawk Over a year ago

This doesn't work because I am iterating through a set of "a" elements where the value of originReference and objArray changes for each event listener. In this case, the value of all the variables passed to the function in my click event will be whatever the final value was. I need it to change based on the value during the iteration.

Collectives™ on Stack Overflow

Passing array of objects generated dynamically to onclick handler

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related