Как добавить объект JSON в атрибут элемента с помощью JQuery

Question

Я пытаюсь почти в течение часа, чтобы решить проблему добавления объекта JSON в атрибут элемента, используя этот код для того, чтобы поиграть в видео:

var json = JSON.stringify({"techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=LKRaXPYSzKY" }); 
$('#popup-companyPitch').html('<video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="580" height="360" data-setup="'+json+'"></video>'); 

у меня то же самое в другой части моего сайта, где я использую PHP, чтобы захватить данные из БД, и он просто работает прекрасно:

<video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="580" height="360" data-setup='{ "techOrder": ["youtube"], "src": "<?php echo $obj->video_url;?>" }'></video> 

Я не знаю, почему я не в состоянии сделать он работает в первом случае с использованием jquery.

Thnx

Answer 1

Проблема заключается в экранирование кавычек в атрибутах так

Если вы хотите, чтобы установить его в качестве самого атрибута

var json = JSON.stringify({"techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=LKRaXPYSzKY" }); 
var $el = $('<video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="580" height="360"></video>').attr('data-setup', json); 
$('#popup-companyPitch').html($el); 

Если вы хотите установить его так же, как свойство данных

var json = {"techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=LKRaXPYSzKY" }; 
var $el = $('<video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="580" height="360"></video>').data('setup', json); 
$('#popup-companyPitch').html($el); 

Answer 2

Вы можете использовать следующий код. лучше, чтобы добавить большой «данных-» с помощью функции data()

var json = JSON.stringify({"techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=LKRaXPYSzKY" }); 
video_element= $('<video id="vid1" src="" class="video-js vjs-default-skin" controls preload="auto" width="580" height="360"></video>'); 
    vide_element.attr('data-setup', json); //if you want visible attribute you can use vide_element.attr('data-setup', json) 

$('#popup-companyPitch').append(video_element);