CODEWITHSUNDEEP
jqueryhtml
Neil
Neil

Reputation: 6039

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/

Upvotes: 72

Views: 55807

Answers (6)

Michael Scheper
Michael Scheper

Reputation: 7118

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.

Upvotes: 1

Dimitrios Desyllas
Dimitrios Desyllas

Reputation: 10166

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.

Upvotes: 4

jfriend00
jfriend00

Reputation: 708146

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/

Upvotes: 129

Javier Gutierrez
Javier Gutierrez

Reputation: 559

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"));

Upvotes: -6

Andreas Wong
Andreas Wong

Reputation: 60594

"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/

Upvotes: 2

Yoshi
Yoshi

Reputation: 54659

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.

Upvotes: 6

Related Questions