Как применить контент json для атрибута html

Question

Я пытаюсь добавить объект json для содержимого hrml arrtibute, но не работает. Я пробовал много способов, но я не знаю, как это установить. Если кто-нибудь знает об этом, пожалуйста, помогите решить эту проблему.

JavaScript:

   var validatorValue='{ 
            "picker":{
                    "allow":
                        {
                        "message": "Content loram ipsom"
                        },
                    "past":
                        {
                        "message": "lorem issom"
                        }  
                }
           }' ;

   var daterestrictValue="{'range': {'start': '2019-10-30','end': '2019-12-30'}}";


   var myinputValue="{'date':'tomorrow'}";

$("#mydiv").html("<div input="true" validator='+validatorValue+' date-restrict='+daterestrictValue+'  my-input='+myinputValue+'></div>");

Answer 1

этот код сохраняет объект в элементе html.

удачи

var validatorValue="{ 'picker':{'allow':{'message': 'Content loram ipsom'},'past':{'message': 'lorem issom'}}}";
var daterestrictValue="{'range': {'start': '2019-10-30','end': '2019-12-30'}}";
var myinputValue="{'date':'tomorrow'}";
    $("#mydiv").html(`
    <div input='true' validator="${validatorValue}" date-restrict="${daterestrictValue}" my-input="${myinputValue}">ggg</div>`);

Answer 2

Основная проблема с вашим кодом (кроме разрывов строк в строковых литералах) - это несоответствующие кавычки в HTML-строке, которую вы строите. Однако даже после их исправления у вас будут проблемы с помещением сериализованного JSON в атрибуты, поскольку он также содержит двойные кавычки, которые нарушают синтаксис HTML.

Также обратите внимание, что вы создаете нестандартные атрибуты в создаваемом HTML-коде. что может вызвать непредвиденные проблемы в вашем пользовательском интерфейсе и JS.

Альтернативный способ подойти к этому - работать со значениями как объектами (а не строками). Вы можете использовать jQuery для установки data элемента, используя эти объекты, например:

var validatorValue = { "picker": { "allow": { "message": "Content loram ipsom" }, "past": { "message": "lorem issom" } } }
var daterestrictValue = { 'range': { 'start': '2019-10-30', 'end': '2019-12-30' } }
var myinputValue = { 'date': 'tomorrow' };

var $newDiv = $('<div data-input="true">Click me</div>').appendTo('#mydiv');
$newDiv.data({
  "validator": validatorValue,
  "date-restrict": daterestrictValue,
  "my-input": myinputValue
});

// for testing
$('#mydiv div').on('click', function() {
  console.log($(this).data('validator'));
  console.log($(this).data('date-restrict'));
  console.log($(this).data('my-input'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>