jquery access html5 custom data attribute in JSON format

Question

I constructed table row with custom data attributes, using php:

<tr id="92280001" style='font-weight:bold' data-seqSet={'set':'1',seq1:'foo',seq2:'bar'}>

in my script i need to get these values (set,seq1,seq2), when clicking on table row:

isSet=$(this).closest('tr').data('seqset').set;
console.log(isSet);

it gives me undefined. I need it equals 1. But when i use:

isSet=$(this).closest('tr').data('seqset');
console.log(isSet);

Then it prints whole JSON. What i missing?

Answer 1

Your attribute is not JSON. Because of that jQuery can't parse this string as JSON. Basically it checks with try-catch block, and if it's able to parse it then jQuery returns object as the result of .data call.

Make it valid JSON string then it will work:

data-seqSet='{"set": "1", "seq1": "foo","seq2": "bar"}'

Note, how attributes need to be properly quoted with ".

---

Source code refs:

Here is a function that is used to convert attribute string to object: https://github.com/jquery/jquery/blob/1777899a747647f3fa839eea4b0bb695d3b60f06/src/data.js#L42 (called from https://github.com/jquery/jquery/blob/1777899a747647f3fa839eea4b0bb695d3b60f06/src/data.js#L153).

Answer 2

As @dfsq pointed out to me jQuery .data() will parse the attribute as an object if a properly formatted JSON string is detected. So the solution is to correct your JSON formatting to wrap the key values in "

data-seqSet = {"set": "1", "seq1": "foo", "seq2": "bar"}

isSet = $(this).closest('tr').data('seqset').set;
alert(isSet);

Answer 3

in php echo must be:echo "<tr id='92280001' style='font-weight:bold' data-seqSet='{\"set\":\"1\",\"seq1\":\"foo\",\"seq2\":\"bar\‌​"}'>";