Retrieve boolean data from data attribute in jquery

I am trying to retrieve a data attribute of type Boolean from an html DIV element , however it is always returning false when the string is converted to boolean .

HTML

<div id='test' data-return="true"></div>

JS

isreturn_str = $('#test').data('return');
isreturn = (isreturn_str === 'true');
if (isreturn) {
    document.write("It is true");
} else {
    document.write("It is false");
}

output

> It is false

http://jsfiddle.net/neilghosh/494wC/

The jQuery .data() method is smart about recognizing boolean and numeric values and converts them into their native type. So this returns the boolean true, not "true":

$('#test').data('return');

If you want to get the raw data (without the automatic data conversion), you can use .attr():

$('#test').attr("data-return");

See the working test case here: http://jsfiddle.net/jfriend00/6BA8t/

jQuery recognizes the string "true" as it's boolean counterpart (in the context of data attributes) and thus:

typeof isreturn_str; // boolean

but you're strictly comparing to the string 'true' which yields false as a string is not a boolean.

In my case the proposed solutions did not helped me therefore I created my own boolean conversion function using jquery:

/**
* Convert a value into a boolean
* @param {Mixed} value The value to check convert into boolean
* @return {Boolean}
*/
var boolVal=function(value){
  var falseValues=['false',0,undefined,'0','no','null',null];

  if (typeof value === 'string' || value instanceof String){
      value=value.toLowerCase();
  }

  return $.inArray(value, falseValues) == -1
}

So I retrieve the value via attr jquery method and I pass it like that for example:

boolVal($(href).attr('data-sidebar-sm-display'));

Also you can see it for youself in the following demo:

var boolVal = function(value) {
  var falseValues = ['false', 0, undefined, '0', 'no', 'null', null];

  if (typeof value === 'string' || value instanceof String) {
    value = value.toLowerCase();
  }

  return $.inArray(value, falseValues) == -1
}

console.log("#1_true: " + boolVal($("#1_true").attr('data-boolean')))
console.log("#2_true: " + boolVal($("#2_true").attr('data-boolean')))
console.log("#3_true: " + boolVal($("#3_true").attr('data-boolean')))
console.log("#4_true: " + boolVal($("#4_true").attr('data-boolean')))
console.log("#5_true: " + boolVal($("#5_true").attr('data-boolean')))
console.log("#6_true: " + boolVal($("#6_true").attr('data-boolean')))
console.log("#7_true: " + boolVal($("#7_true").attr('data-boolean')))

console.log("#1: " + boolVal($("#1").attr('data-boolean')))
console.log("#2: " + boolVal($("#2").attr('data-boolean')))
console.log("#3: " + boolVal($("#3").attr('data-boolean')))
console.log("#4: " + boolVal($("#4").attr('data-boolean')))
console.log("#4: " + boolVal($("#no_data").attr('data-boolean')))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="1" data-boolean="false"></div>
<div id="2" data-boolean="0"></div>
<div id="3" data-boolean="null"></div>
<div id="no_data"></div>
<div id="4" data-boolean=false></div>

<div id="1_true" data-boolean=yes></div>
<div id="2_true" data-boolean="yes"></div>
<div id="3_true" data-boolean="true"></div>
<div id="4_true" data-boolean="1"></div>
<div id="5_true" data-boolean=1></div>
<div id="6_true" data-boolean="true"></div>
<div id="7_true" data-boolean="TRUE"></div>

The basic idea it to define what data-attribute is considered by logic "false" and anything else is set as true.

"true" is internally casted to boolean (try alert (typeof(isreturn_str))), hence your === comparison fails on type check.

You could call .toString()

isreturn_str = $('#test').data('return').toString();

http://jsfiddle.net/494wC/8/

This doesn't answer your question exactly, but if you're able to change the design of the HTML, consider making the attribute's presence the boolean value, instead of converting string values. In other words, have <div id="test" data-isreturn> represent true, and just <div id="test"> (without the attribute) represent false.

While this may seem less intuitive for some coders, it's actually semantically consistent with HTML (e.g. the disabled attribute), and it eliminates concerns about typos and capitalisation in strings. It reduces ambiguity, and is terse and elegant.

jQuery's .prop() function is helpful for this.

I'm using jquery 2.1.0 and I have to use eval

// $('#test').attr("data-return");" doesn't works
eval($('#test').attr("data-return"));