Использование stringify для объекта JSON для использования в атрибуте данных HTML - PullRequest
Новая
       8

Использование stringify для объекта JSON для использования в атрибуте данных HTML

0 голосов
/ 11 ноября 2018

Я просматривал различные сообщения о 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="{&quot;title&quot;:&quot;this is a test for &quot; and ' it fails.&quot;,&quot;url&quot;:&quot;some url&quot;}" 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.log (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>

Ответы [ 2 ]

0 голосов
/ 11 ноября 2018 

  var data = {
    title: 'This is a test for " and \'. It fails.',
	  url: 'Some url'
  };

  data = JSON.stringify(data);

  console.log (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>
0 голосов
/ 11 ноября 2018

Подумайте о вставке объекта 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.log($('#test').data('title'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...