Javascript JSON.parse string onclick in-line

Question

I'm using jquery to append HTML to an ID; specifically, I am having trouble placing a JSON-formatted string into the onclick parameter of an element. I intentionally want the JSON to be parsed onClick and am perfectly okay with the JSON living in the DOM for this specific effort.

I think the problem is related to escaping the quotes properly (because a Chrome Inspect Elements debug reveals that each JSON element is being treated as an HTML tag as opposed to a string--see https://ibb.co/eHOgq8 for screenshot of how the DOM is being interpreted)

var str = '{"artist":"So and So","title":"Not Relevant"}';

$("#d").append('<ul><li><a onclick="JSON.parse(\'' + str + '\')" title="NA">Link</a></li></ul>')

I've tried using numerous escaping mechanism and quote types as well as some native Javascript escaping and gotten no where. After 2 hours, I have to turn SO for help. Thank you so much in advance.

What you really want to achieve by putting JSON in onClick?Right now I is not making any sense . — Nishant Dixit
– Nishant Dixit, Commented Jun 8, 2018 at 4:46

Rohìt Jíndal · Accepted Answer · 2018-06-10 11:55:59Z

2

Try this :

var str = '{"artist":"So and So","title":"Not Relevant"}';

var jsonObj = JSON.parse(str);

$("#d").append('<ul><li><a onclick="alert(JSON.stringify(jsonObj))" title="NA">Link</a></li></ul>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d"></div>

answered Jun 10, 2018 at 11:55

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

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

1 Comment

Kurt W Over a year ago

Thank you very much for the late but direct answer to the question I have/had. Much appreciated!

CertainPerformance · Accepted Answer · 2018-06-08 04:45:24Z

0

Don't try to assign handlers with inline attributes - that's as bad as eval, and as you're experiencing, can lead to confusing issues with escape characters. Instead, attach handlers properly using Javascript instead, for example:

var str = '{"artist":"So and So","title":"Not Relevant"}';
$('#div').append('<ul><li><a title="etc">link</a></li></ul>');
$('div a').on('click', () => console.log(JSON.parse(str)));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>

answered Jun 8, 2018 at 4:45

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

2 Comments

Kurt W Over a year ago

Thanks for your quick reply! Maybe I didn't give enough context to address my real problem. The above will work, but I am in the middle of a loop when I'm writing the updated HTML so each click event would need to be against a unique div. Also, I can get it to log to console in the proper format already but when injected into the DOM, that's where it starts to think the json key/value pairs are actually HTML elements (catching the closing quote of onClick too early I think). See ibb.co/kv9PtT for real code. The JSON is trusted (user cannot alter/inject). Hope you can help!

CertainPerformance Over a year ago

That's just an example - if you have multiple as, then of course you'll have to make the selector more specific, such as targeting the last a or making a separate variable for the a before appending it. If code is relevant to your question, please post it in your question itself (see the How to Ask page)

Collectives™ on Stack Overflow

Javascript JSON.parse string onclick in-line

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related