Passing Objects as Parameters in javascript function

Question

I want to pass Objects as parameters to the javascript function and

I had tried with the following,Actually iam calling the function the function in innerHtml..

var tempObj={
        result:results,
        jsobj:jsObj
    }

    str +='<input type="button" onclick="buildCstrWiseChart('+tempObj+')" value="View" class="btn btn-info">';

but this didnt works for me iam getting the error like..

SyntaxError: missing ] after element list
[Break On This Error]   

buildCstrWiseChart([object Object])

can any one help in this..

that is valid javascript code and should work, show some more code, i guess your error is somewhere else — x4rf41
– x4rf41, Commented May 2, 2013 at 14:31
You will need to post your whole/actual code, especially the part with the list. The syntax error should have a line number for it. — Bergi
– Bergi, Commented May 2, 2013 at 14:32
Are you doing something like eval("someFunc(" + someObject + ")")? If so, why? — Frédéric Hamidi
– Frédéric Hamidi, Commented May 2, 2013 at 14:32
Now that you've edited the post, it's completely different from the initial code. You're treating an object as a string. That's the error. — Terry Young
– Terry Young, Commented May 2, 2013 at 14:39

Terry Young · Accepted Answer · 2013-05-02 14:41:32Z

4

You were treating an object as if it were a string. That's the error.

Is tempObj a global variable? If so, just do

str +='<input type="button" onclick="buildCstrWiseChart(tempObj)" value="View" class="btn btn-info">';`

answered May 2, 2013 at 14:41

Terry Young

3,5311 gold badge22 silver badges21 bronze badges

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

4 Comments

user1106925 Over a year ago

+1 If it isn't global, OP will need to make it globally accessible to make the object reachable from an inline handler attribute.

sasi Over a year ago

Thanks its working..Initially i tried this..but it didnt works then...yep thats works fine when i declared the variable globally..can i know why to declare that variable as global..

Terry Young Over a year ago

Like @squint said, your onclick handler needs to be aware of what tempObj is. So if tempObj is not global, the handler would not know what it is. Makes sense?

user1106925 Over a year ago

@sasi: The function is created in effectively the same way that a function made using the Function constructor would be made. This means that the variable scope is limited to the global scope. (Actually inline handlers have the properties of a couple DOM elements included in the scope as well, but the local function scope is certainly not included).

Anthony Grist · Accepted Answer · 2013-05-02 15:04:30Z

2

The string representation of an object is just [object Object] so when you attempt to concatenate it when building your HTML you end up with

onclick="buildCstrWiseChart([object Object])"

which isn't valid HTML. The [object part is parsed as the start of an array, but the Object] part isn't valid array syntax.

I'd suggest, rather than building a HTML string, you instead use jQuery to actually create the DOM element:

$('<input type="button"/>', {
    value: 'View',
    className: 'btn btn-info'
}).click(function() {
    buildCstrWiseChart(tempObj);
});

Then use either the .append() or .appendTo() jQuery function to add that element to whatever containing element you want it to be inside of.

edited May 2, 2013 at 15:04

answered May 2, 2013 at 14:43

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

1 Comment

HMR Over a year ago

I think this answer deserves some upvotes since the other one is using some pretty bad ways to solve the problem. First: don't declare handlers inline and Second: don't put variables in global scope just because you can't access them. At the very least wrap them in a global object.

PhonicUK · Accepted Answer · 2013-05-02 14:44:59Z

0

NB: OP has changed the code posted since originally posting.

I'd wager the issue is with this:

...onclick="buildCstrWiseChart('+tempObj+')"...

I don't think that'd work when tempObj isn't something other than a string. Seems dangerous to do in any case.

What you'd really need to do is instead of putting the actual object in the string, put in a value that references it (perhaps build a dictionary of id:object) and just include the id as a data-attribute. Then in your onclick method you can look up that attribute, and find the object for the supplied ID.

edited May 2, 2013 at 14:44

answered May 2, 2013 at 14:34

PhonicUK

13.9k4 gold badges47 silver badges65 bronze badges

3 Comments

user1106925 Over a year ago

You have enough rep to know this isn't an answer. It's a comment merely stating that the given code works.

Anthony Grist Over a year ago

"It works for me" isn't exactly an answer to the question, so the downvotes shouldn't come as a surprise.

PhonicUK Over a year ago

"This works fine" is a perfectly acceptable answer when including something along with it that demonstrates it works and therefore can be eliminated as the source of the problem. If the question is "what's wrong with this?" then "nothing" is not a non-answer.

Cedric Reichenbach · Accepted Answer · 2013-05-02 14:33:54Z

-1

Well, the problem is in your function someFunc.

The following example works perfectly fine:

var f = function (el){
    alert(el)
};

var x = {a: "hey", b: "ho"};

Then

f('hi');
f(x);

gives no errors.

answered May 2, 2013 at 14:33

Cedric Reichenbach

9,4097 gold badges58 silver badges92 bronze badges

Collectives™ on Stack Overflow

Passing Objects as Parameters in javascript function

4 Answers 4

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related