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?

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?

• javascript
• jquery
• json

• 2 That eval hurts my eyes. – Gabi Purcaru Commented Nov 24, 2010 at 7:49
• try to avoid eval if possible , did you try jquery.metada plugin if it has any options. – kobe Commented Nov 24, 2010 at 7:51

3 Answers 3

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)

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.

If you write in html

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

You get

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

in browser.