onclick function - json string variable not working

Question

The json I receive looks like this:

Object:  
bpi:206000  
buyout:4120000  
itemId:133564  
itemName:"Spiced Rib Roast"  
name:"Flipflap"  
quantity:20  
timeLeft:"VERY_LONG"  
undercut:0

I'm populating a table through a jquery .each function.
One of the elements is set to fire of a function when it's pressed.
The code pushing items to the table looks like this:

$.each(data, function(i, key){
   items.push('<tr class="tr1"><td><a onclick="getItemData(' + key.itemId + ',' + key.itemName')" rel="item=' + key.itemId + '"">' + key.itemName + '</a>' + "</td><td>" + getAmount(key.buyout) + "</td><td>" + key.quantity + "</td><td>" + ifUndercut(key.undercut) + "</td><td>" + key.timeLeft.replace('_', ' ') + "</td></tr>");
});

The problem is with this piece of the code:

onclick="getItemData(' + key.itemId + ',' + key.itemName')"

This piece of code gives various variation of missing syntax errors.
Swapping out key.itemName with another key.itemId makes the onclick function work.
Is it the formatting of the string that's the problem?
How can I make it work with key.itemName?

The json I receive looks like this - there's the problem, that aint JSON — Jaromanda X
– Jaromanda X, Commented Nov 14, 2016 at 8:41

Rory McCrossan · Accepted Answer · 2016-11-14 08:25:09Z

4

The issue is because itemName is a string, so you need to wrap it in quotes when it's output. You're also missing a + concatenating the string after the value. Try this:

items.push('<tr class="tr1"><td><a onclick="getItemData(' + key.itemId + ',\'' + key.itemName + '\')" rel="item=' + key.itemId + '"">' + key.itemName + '</a>' + "</td><td>" + getAmount(key.buyout) + "</td><td>" + key.quantity + "</td><td>" + ifUndercut(key.undercut) + "</td><td>" + key.timeLeft.replace('_', ' ') + "</td></tr>");

Note the addition of \' around the value.

I would also strongly suggest you research the use of both unobtrusive and delegated event handlers, as the on* event attributes are very outdated now and should be avoided where possible.

answered Nov 14, 2016 at 8:25

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

Tân Over a year ago

So, why not $('<tr>').addClass('tr1') instead of '<tr class="tr1">'?

Chris Over a year ago

Thank you, that did it. I wasn't aware that I could use \. I tried every combination of '' and "" that I could think of.

Rory McCrossan Over a year ago

@TânNguyễn you could do that too, although it would just make the example above extremely verbose. If you have that much HTML to add to the DOM I'd suggest you look in to a templating library

Jon Taylor · Accepted Answer · 2016-11-14 08:27:47Z

1

Your problem is the types of quotes you are using, a mix of double and single quotes

onclick="getItemData(" + key.itemId + ",\"" + key.itemName"\")"

answered Nov 14, 2016 at 8:27

Jon Taylor

7,9255 gold badges32 silver badges55 bronze badges

Comments

SURJEET SINGH Bisht · Accepted Answer · 2016-11-14 08:37:32Z

0

you missed the + operator: update this one:

      onclick="getItemData(' + key.itemId + ',' + key.itemName+')"

edited Nov 14, 2016 at 8:37

answered Nov 14, 2016 at 8:30

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

4 Comments

Angel Politis Over a year ago

How is your answer useful?

Rory McCrossan Over a year ago

Firstly, the OP has given no indication that they are using angular at all. Secondly, even if they had your sample code is completely irrelevant to their problem

SURJEET SINGH Bisht Over a year ago

oops sorry i paste it on wrong side. let me change the answer. actully click event on dynamic html will be get by using delegate function.

Rory McCrossan Over a year ago

You also need to add escaped string delimiters

Collectives™ on Stack Overflow

onclick function - json string variable not working

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related