how to make custom-data-attribute value numeric with javascript

Question

Hi I am reading two numbers from html data-tags stored in a div. When I try to add the numbers together they are appended as strings. Is there anyways to include numbers in a data attribute and access them as numbers or convert them back into non - string numbers with javascript thanks.

Example

<div data-Lon1="1.3" data-Lat1="-1.2"></div>

<script>
   lon1 = $('#zoom1').attr('data-lon1');
   lat1 = $('#zoom1').attr('data-lat1');
   console.log(lat1+lon1);

   //returns '1.3-1.2' (I want .1 in this example)
</script>

An easier way to access data attributes you can use is this btw: $("zoom1").data("lon1"); — Logard, Jun 25 '12 at 21:12
for some reason trying to access the data with the data method returns undefined. Does this only work if you store the data with the data method as well? — codelove, Jun 25 '12 at 21:22

score 6 · Accepted Answer · answered Jun 25 '12 at 21:11

6

Just use parseFloat():

var lon1 = parseFloat($('#zoom1').attr('data-lon1'));
   lat1 = parseFloat$('#zoom1').attr('data-lat1'));
console.log(lat1+lon1);

JS Fiddle demo.

References:

answered Jun 25 '12 at 21:11

David Thomas

249,100
51
377
410

this works great, thanks... Do you know if this faster than using the data() method? – codelove Jun 25 '12 at 21:26
2

@codelove It should be faster since jQuery doesn't have to interpret what type of data it is, though I would still prefer the `.data` method. – Kevin B Jun 25 '12 at 21:30
I defer to Kevin B in this, but I have no objective evidence to support that assumption (other than simple common sense, based on work-avoidance). – David Thomas Jun 25 '12 at 21:31
Yes, testing that micro-optimization would be a waste of time unless you are dealing with a (very)large number of elements, and you would have to consider cross-browser differences since some browsers provide an api for accessing these values directly which may be faster than the .attr approach. – Kevin B Jun 25 '12 at 21:32

score 4 · Answer 2 · answered Jun 25 '12 at 21:11

You could use the .data() method which will take care of properly parsing the value to the underlying type:

var lon1 = $('#zoom1').data('lon1');
var lat1 = $('#zoom1').data('lat1');
console.log(lat1 + lon1);

You will notice that when using the .data() method you are no longer passing as argument the full attribute name, but only the suffix - lon1 and lat1 instead of data-lon1 and data-lat1.

And here's a live demo: http://jsfiddle.net/E7Av7/

Oh, and don't forget to give a correct id to your div so that your data selector returns something as you seem to have forgotten to do this in the code snippet posted in your question:

<div data-Lon1="1.3" data-Lat1="-1.2" id="zoom1"></div>

score 0 · Answer 3 · answered Jun 25 '12 at 21:11

0

There is a JavaScript function called parseFloat. Use parseFloat($("#zoom1").attr("data-lon1").

answered Jun 25 '12 at 21:11

ClarkeyBoy

4,934
12
49
64

score 0 · Answer 4 · edited May 23 '17 at 12:32

Use .data() which attempts to parse the value.

var lon1 = $('div').data('lon1');
var lat1 = $('div').data('lat1');
console.log(lat1+lon1);

If you want the result to be 0.1 from that though, you must do something like:

console.log( Math.round( ( lat1+lon1 ) * 100000000000 ) / 100000000000 );

Otherwise you will get 0.10000000000000009 instead of 0.1

See Is floating point math broken?

http://jsfiddle.net/E7Av7/1/

how to make custom-data-attribute value numeric with javascript

4 Answers4