Javascript JSON.parse строка onclick in-line

Question

Я использую jquery для добавления HTML к идентификатору;В частности, у меня возникают проблемы при помещении строки в формате JSON в параметр onclick элемента.Я намеренно хочу, чтобы JSON был проанализирован на клике, и я вполне согласен с JSON, живущим в DOM для этого конкретного усилия.

Я думаю, что проблема связана с правильным экранированием кавычек (поскольку отладка Chrome Inspect Elements показываетчто каждый элемент JSON обрабатывается как тег HTML, а не как строка - см. https://ibb.co/eHOgq8 для скриншота интерпретации DOM)

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

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

Я пытался использовать многочисленныемеханизм экранирования и типы кавычек, а также некоторые нативные экранирование Javascript и их отсутствие.Через 2 часа я должен обратиться за помощью.Заранее большое спасибо.

Answer 1

Попробуйте это:

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>

Answer 2

Не пытайтесь назначать обработчики со встроенными атрибутами - это так же плохо, как eval, и, как вы испытываете, может привести к путанице с escape-символами.Вместо этого, правильно подключите обработчики, используя Javascript, например:

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>