Insert JSON to HTML data attribute

Question

I want to get data from one div and insert the data to a new div using data attribute.

//get data from old div as JSON
var data = JSON.parse(document.getElementById('video_data').getAttribute('data-video'));

This is the div from where I get data.

//insert the data to the new div
document.getElementById('i').insertAdjacentHTML('afterbegin', '<div class="video_wrap update" video_name="' + data.video_name + '" data-video="' + JSON.stringify(data) + '"><div class="content"><div class="title_wrap infinite_wrap"><div class="quality uninfinite">∞</div></div><div class="img_wrap"><img src="https://i.ytimg.com/vi/' + data.yt_id + '/hqdefault.jpg"></div><div class="title_wrap"><div class="title">' + data.title + '</div></div></div></div>');

This is what I get after inserting the new div.

You can see that even the colour is not correct

What is the problem?

karina · Accepted Answer · 2016-04-20 23:47:13Z

2

Json stringify is just turning it into a string. You need to escape the double quotes in the resulting string so that it will play nice when rendered

I could probably also globally replace the " with ' if you are confident there are no single quotes in you data?

Oh as an afterthought If you construct the div in JavaScript and you only support newer browsers you should be able to do

El.dataset.video = your json string

edited Apr 20, 2016 at 23:47

answered Apr 20, 2016 at 23:40

karina

8055 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

M1X Over a year ago

I did this: data.replace(/"/g, '\\"') and no result.

karina Over a year ago

You need to do that to the result of json.stringify(data)

M1X Over a year ago

I did that var a = JSON.stringify(data); var b = a.replace(/"/g, '\\"'); and than I inserted b.

karina Over a year ago

Hrm. Replace with single quote then? A bit of googling shows that HTML doesn't respect the \ as an escape char.

M1X · Accepted Answer · 2016-04-21 14:15:38Z

0

document.getElementById('i').insertAdjacentHTML('afterbegin', '<div class="video_wrap update" video_name="' + data.video_name + '"><div class="content"><div class="title_wrap infinite_wrap"><div class="quality uninfinite">&infin;</div></div><div class="img_wrap"><img src="https://i.ytimg.com/vi/' + data.yt_id + '/hqdefault.jpg"></div><div class="title_wrap"><div class="title">' + data.title + '</div></div></div></div>');
document.getElementById('i').firstChild.setAttribute('data-video', JSON.stringify(data));

This fixed the error.

answered Apr 21, 2016 at 14:15

M1X

5,38213 gold badges66 silver badges131 bronze badges

Collectives™ on Stack Overflow

Insert JSON to HTML data attribute

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related