Использование строкового преобразования объекта JSON для использования в атрибуте данных HTML
Я просматривал различные сообщения на stringify, но не смог найти решения своей проблемы.
Я пытаюсь преобразовать объект JSON в строку и вставить его в атрибут данных нового элемента в DOM.
В приведенном ниже примере, если элемент проверяется с помощью Chrome, а затем выбран вариант редактирования HTML, результат будет выглядеть следующим образом:
<div class = "ui-menu-item" data-menu-item = "{" title":"this = "" is = "" a = "" test = "" for = "" \" = "" and = "" '. = "" it = "" fails.","url":"some = "" url"}" = "" id = "test">This element contains the data.</div>
Я думаю, что требуемый результат должен выглядеть так:
<div class = "ui-menu-item" data-menu-item = "{"title":"this is a test for " and ' it fails.","url":"some url"}" id = "test">This element contains the data.</div>
Примечание. Я знаю, что могу использовать метод данных jQuery, но предпочитаю этого не делать.
var data = {
title: 'This is a test for " and \'. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.info (data);
$(document).ready(function() {
var tpl = "<div class=\"ui-menu-item\" data-menu-item=\"" + data + "\" id=\"test\">This element contains the data.</div>";
$('body').append(tpl);
});<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>@NeoAnderson привет, как я уже упоминал в посте, я знаю об этом, но я бы предпочел оставить это в атрибуте. Атрибуты существуют на существующих элементах, созданных на стороне сервера, и я просто хочу, чтобы все было согласовано.
Вы можете создать <div>, а затем использовать setAttribute() для установки значения в строку JSON.
Кажется, вам может потребоваться написать собственную формулу string.replace, чтобы избавиться от двойных кавычек или других специальных символов. Ожидаете ли вы, что вы также снова загрузите этот JSON и проанализируете его для последующего использования в своем приложении?
если вы настаиваете на том, что не используйте .data (). как насчет использования encodeURI и decodeURI. , как одна из функций, аналогичных подготовительной для этой проблемы. вы можете сделать это: encodeURI (JSON.stringify (data))
Не требует кодировки URI; в конце концов, это не URI. Все, что ему нужно, - это заменить все символы двойных кавычек на @quot;, но это необходимо только в том случае, если фрагмент должен быть проанализирован как HTML.
Кажется, очевидным ответом является то, что мне, вероятно, следует просто использовать .data (), но я также дам создание div и установку атрибута данных.
Использовать .setAttribute() напрямую почти так же просто, и, в отличие от .data(), у вас действительно будет атрибут в DOM.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Рассмотрите возможность вставки объекта jQuery вместо выполнения всей этой работы по экранированию строки и используйте метод data() для передачи вашего объекта элементу.
var data = {
title: 'This is a test for " and \'. It fails.',
url: 'Some url'
};
var tpl = $('<div>', {class: "ui-menu-item",id: "test"})
.text("This element contains the data")
.data(data);
$('body').append(tpl);
console.info($('#test').data('title'))<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Я большой поклонник .data(), но следует отметить, что на самом деле он не является атрибутом установленный на узле DOM.
@Pointy обнаружил удивительную проблему, когда при использовании для установки в родительском документе вы не могли получить к нему доступ из iframe, используя iframe-версию jQuery global. Я всегда предполагал, что он использовал Element.dataset в более поздних версиях, но оказалось, что это не так. Пришлось сделать window .parent.$(selector).data(), чтобы получить
var data = {
title: 'This is a test for " and \'. It fails.',
url: 'Some url'
};
data = JSON.stringify(data);
console.info (data);
$(document).ready(function() {
var tpl = "<div class=\"ui-menu-item\" id=\"test\">This element contains the data.</div>";
$('body').append(tpl);
$('#test').attr('data-menu-item', data)
});<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
привет Аса, ты пробовал jQuery.data ()? он отлично работает в этих ситуациях. если у вас есть jquery, используйте его.