How can I get a HTML data value as a string with jQuery?

Go To StackoverFlow.com

22

I have the following in my source HTML:

<li><a href="#" data-value="01">Test</a></li>

I want to get the value of the data attribute so I am using the following:

var abc = $(this).data('value');

This works okay BUT not if there is a leading zero. For example the above placed the value "1" into abc.

Is there a way that I can get it not to convert the "01" into "1" ?

2012-04-04 16:35
by Samantha J T Star
possible duplicate of HTML data and a string that looks like a numberj08691 2012-04-04 16:41
I'm not aware of data-value being a correct attribute of an <a> element. Wouldn't it be better to use the rel attribute - JakeJ 2012-04-04 16:48
@JakeJ - See http://ejohn.org/blog/html-5-data-attributes - j08691 2012-04-04 17:21
@j08691 Ah so it's HTML5 it seems by a quick scan. However if it was me developing the site I would stay away from most or all HTML5 features (unless there was a graceful fallback) as to include all old browsers. Thanks for the link, learn something new every day :) + - JakeJ 2012-04-05 09:11


42

this.dataset.value;

// Or old school
this.getAttribute('data-value');

const a = document.querySelector("a");
console.log('Using getAttribute, old school: ', a.getAttribute('data-value'));
console.log('Using dataset, conforms to data attributes: ', a.dataset.value);
<ul>
  <li><a href="#" data-value="01">Test</a></li>
</ul>

Thanks to @MaksymMelnyk for the heads up on dataset

2012-04-04 16:38
by Juan Mendes
+1 for not using jQuery when it's absolutely not needed - Florian Margaine 2012-04-04 17:21
Thanks, Florian, I usually prefer to answer with straight JS, if possible. Though, if the OP is already using jQuery, attr may be a better option, since getAttribute can be buggy across browsers in some edge cases, like when the attribute is one that is used by DOM, such as obj.disabled - Juan Mendes 2012-04-04 17:28
Well, you can use this.dataValue then :) I don't know of any bug around this - Florian Margaine 2012-04-04 17:33
@FlorianMargaine: I had never heard of that. It doesn't seem to work http://jsfiddle.net/uV9dv - Juan Mendes 2012-04-04 17:39
Oh, my bad, I was persuaded this worked! I have no idea why.. - Florian Margaine 2012-04-04 18:04
@JuanMendes, @FlorianMargaine

this.dataset.value will have that value - Maksym Melnyk 2015-08-20 15:26



15

You can use the attr() operator of jQuery:

var abc = $(this).attr('data-value');
2012-04-04 16:38
by joeschmidt45


12

From the jQuery data() documentation, it appears that you have to use .attr() to prevent the automatic type conversion:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string. To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method. When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

So, not to duplicate other answers, but rather to reinforce, the way to access the attribute without doing type conversion is:

var abc = $(this).attr('data-value');
2012-04-04 16:43
by Mike


4

$(this).attr('data-value');

This will return the string value with the leading 0.

2012-04-04 16:39
by Bradley Mountford


2

have you tried?:

$(this).attr('data-value');

or

$(this).attr('data-value').toString();
2012-04-04 16:40
by Josh Siok
$.attr doesn't need toString, it already returns a string, even if it didn't, calling toString would not bring back the original string if it had already been converted to a number - Juan Mendes 2012-04-04 16:53


1

Try :

this.data('value');

I think this is best way to get data attribute value.

2017-07-24 09:09
by Shailesh Singh
Ads