Single quotes in data attribute containing json

Question

Cosmetic question: I have a html element containing possible dimensions for some embedded images, these are stored as:

<div class="inside" data-dimensions='{ "s-x": 213, "s-y": 160, "m-x": ...

I get out the data-dimension and parse with jQuery.parseJSON(jQuery.data("dimensions")) all fine and closely following the jquery's doc.

However I'm used to encapsulate all my html attributes inside double quotes:

<div class="inside" data-dimensions="{ 's-x': 213, 's-y': 160, 'm-x': ...

But then I get a malformed json exception. Are there ways so i can obey my self imposed "double quoted html attributes" law?

score 20 · Accepted Answer · edited Dec 06 '13 at 06:05

20

You can use " instead of ". But quoting orgies are horrible (in HTML even more than in PHP) so better go with single-quoting your html attributes.

BTW, you do not need to use .parseJSON - jQuery does that automatically if the data- attribute starts with { (actually, it's more complex - here's the regex it uses to test if it should be parsed as JSON: ^(?:\{.*\}|\[.*\])$).

edited Dec 06 '13 at 06:05

Shital Shah

63,284
17
238
185

answered Mar 02 '11 at 13:48

ThiefMaster

310,957
84
592
636

thanks for pointing out the parseJSON error. I just came back here for pointing out that parseJSON was wrong after all. If I had come back earlier it would have saved me some time. – dr jerry Mar 02 '11 at 16:16
5

After a long time not understanding why the the JSON in my `data-` attribute wasn't being parsed as JSON, I realized it has to be perfectly formed JSON, including **quotes around property names**. Hope this saves someone some time. http://api.jquery.com/data/#data-html5 – supertrue Apr 05 '12 at 18:30
Thanks to this answer I now know why jQuery doesn't parse my JSON when it's indented... it's the final newline that doesn't match the regex. – Greg Ball Jun 17 '13 at 03:59
How would I manage quotes inside the values of the json object in the attribute? `
– jpmorin Jan 13 '15 at 21:52
1

You HTML-encode them, i.e. `"` (single quotes are not allowed in JSON) – ThiefMaster Jan 13 '15 at 21:53

Russ Cam · Answer 2 · 2011-03-02T13:57:28.160

9

The JSON specification stipulates that keys and (string) values be quoted with double-quotes.

HTML attributes can be enclosed in either single or double quotes.

Personally, I wouldn't fight it and just go with what causes the least amount of friction and is easiest for all to understand which in this case is to single quote the HTML attributes and use double-quotes inside the attribute value.

edited Mar 02 '11 at 13:57

answered Mar 02 '11 at 13:52

Russ Cam

124,184
33
204
266

John Reading · Answer 3 · 2011-12-16T14:53:54.363

9

Try this and you can keep nicely formatted JSON in the attribute:

$.parseJSON($('.inside').data('dimensions').replace(/'/g,"\""))

edited Dec 16 '11 at 14:53

answered Dec 16 '11 at 14:52

John Reading

91
1
2

score 6 · Answer 4 · answered Jul 08 '11 at 01:28

6

Use " instead of " and ' instead of '.

answered Jul 08 '11 at 01:28

Edward Anderson

13,591
4
52
48

6

You should not use ' you should use ' http://stackoverflow.com/questions/2083754/why-shouldnt-apos-be-used-to-escape-single-quotes – bfcoder Sep 02 '13 at 14:23

SeregPie · Answer 5 · 2017-07-10T07:02:52.570

Another way is to use the function eval or create a new function. You can use either " or ' in your JSON and you don't need to put " around the keys in the JSON object.

let el = document.getElementById('example');
let person = (new Function(`return ${el.dataset.person}`))();
console.log(person);
person.age++;
console.log(person.age);

<div data-person="{name:'Natalie Portman',age:35}" id="example"></div>

Single quotes in data attribute containing json

5 Answers5

Linked