Asked  7 Months ago    Answers:  5   Viewed   34 times

In PHP, I use json_encode() to echo arrays in HTML5 data attributes. As JSON requires - and json_encode() generates - values encapsulated by double quotes. I therefor wrap my data attributes with single quotes, like:

<article data-tags='["html5","jquery","php","test's"]'>

As you can see, the last tag (test's) contains a single quote, and using json_encode() with no options leads to parsing problems.

So I use json_encode() with the JSON_HEX_APOS parameter, and parsing is fine, as my single quotes are encoded, but I wonder: is there a downside doing it like this?

 Answers

88

You need to HTML escape data echoed into HTML:

printf('<article data-tags="%s">',
    htmlspecialchars(json_encode(array('html5', ...)), ENT_QUOTES, 'UTF-8'));
Wednesday, March 31, 2021
 
vuliad
answered 7 Months ago
77

You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with

<div id="geoff" data-geoff="geoff de geoff">

I can get the value of data-geoff using

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).

But this has nothing to do with HTML5-specific attributes, of course.

Tuesday, June 1, 2021
 
Freddie
answered 5 Months ago
25

Use the proper tool for the job, you are not parsing JSON but Python, so use ast.literal_eval() instead:

>>> import ast
>>> ast.literal_eval('["a", "b", "c"]')
['a', 'b', 'c']
>>> ast.literal_eval("['a', 'b', 'c']")
['a', 'b', 'c']
>>> ast.literal_eval('["mixed", 'quoting', """styles"""]')
['mixed', 'quoting', 'styles']
  • JSON documents always use double quotes for strings, use UTF-16 for uhhhh hex escape syntax, have {...} objects for key-value pairs with keys always strings and sequences are always [...] lists, and use null, true and false values; note the lowercase booleans. Numbers come in integer and floating point forms.

  • In Python, string representations can use single and double quotes, Unicode escapes use uhhhh and Uhhhhhhhh forms (no UTF-16 surrogate pairs), dictionaries with {...} display syntax can have keys in many different types rather than just strings, sequences can be lists ([...]) but can also use tuples ((...)), or you could have other container types still. Python has None, True and False (Titlecase!) and numbers come in integers, floats, and complex forms.

Confusing one with the other can either lead to parse errors or subtle problems when decoding happened to succeed but the data has been wrongly interpreted, such as with escaped non-BMP codepoints such Emoji. Make sure to use the right method to decode them! And in most cases when you do have Python syntax data someone actually used the wrong method of encoding and only accidentally produced Python representations. See if the source needs fixing in that case; usually the output was produced by using str(object) where json.dumps(obj) should have been used instead.

Saturday, July 3, 2021
 
iceduck
answered 4 Months ago
36

dataset is a native property of an element that contains the data attributes, it's a new(ish) addition and as such is only supported in IE11+, Chrome 8+, FF 6+ etc.

A more cross browser solution would be to get the attribute directly

webappData.getAttribute('data-rating');

data() is a jQuery method, and other than using the HTML5 data attribute to set the inital value if none exists internally, it has nothing in common with dataset.

data() stores whatever data you pass it in an internal object created by jQuery, so this for instance would fail

$(element).data('key', 'value');

element.dataset.key // undefined

as the data is not stored in the attributes at all, but internally by jQuery.
The jQuery equivalent of getting and setting the data attribute would be attr()

$(element).attr('data-key', 'value');

The native methods are probably faster, but as they are not really comparable to jQuery's data() it doesn't really matter, but for getting the data attribute I would think the fastest method with the best browser support would be

var rating = webappData.getAttribute('data-rating');
Wednesday, July 28, 2021
 
jsuggs
answered 3 Months ago
11

You can use &quot; 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: ^(?:{.*}|[.*])$).

Saturday, September 25, 2021
 
George Shaw
answered 3 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :