CODEWITHSUNDEEP
javascriptjqueryjson
Whimsical
Whimsical

Reputation: 6335

Adding a data attribute(with special characters) to a dom element using jquery

I am trying to add a data attribute to a html element. The data attribute(data-description) can contain special characters like apostrope.

InsertHtml = InsertHtml + '<tr id="DashboardRow0" data-description=\'' + JSON.stringify(data[0])+ '\'><td>' + </td></tr>';
htmlElement.append(InsertHtml);

The code to access this data is given below...

var $row = $("#DashboardRow0");
var jsonData = eval('(' + $row.attr('data-description') + ')');

But the problem is...If there is a single apostrophe within JSON.stringify(data[0]) data..the browser replaces it with a " effectively terminating the string.

Is there any know solution to adding data attributes with special characters to nodes?

Upvotes: 3

Views: 3889

Answers (3)

rbhro
rbhro

Reputation: 208

try to escape data before stringify 

data[0].myProblemField = escape(data[0].myProblemField)
JSON.stringify(data[0])

<edit>
or better

 for(var prop in data[0]) if(typeof(data[0][prop]) == "string") 
   data[0][prop] = escape(data[0][prop]);

</edit>

and afterwards

var jsonData = eval('(' + $row.attr('data-description') + ')');
jsonData.myProblemField = unescape(data[0].myProblemField)

Upvotes: 7

yname
yname

Reputation: 2245

If you write in html

<tr id="some &quot; "><td>...</td></tr>

You get

<tr id="some " "><td>...</td></tr>

in browser.

Upvotes: 1

Pekka
Pekka

Reputation: 449385

Not entirely sure whether this'll help you (i.e. whether this is all happening in the same document), but have you considered using jQuery's .data()? It won't have these problems, as the data is stored as a variable.

Upvotes: 2

Related Questions