Filter items based on data attribute in jQuery

Question

I have a list of jQuery items found using

var groupedItems = $('div[data-group-id="'+groupId+'"]');

Each grouped item has a propery called

data-info={"isAvailable":"true","isValid":"false"}

from the groupedItem I want to filterOut only which has property isAvailable=true.

How can I filter based on data attribute?

Pranav C Balan · Accepted Answer · 2017-12-14 07:54:06Z

1

You can use jQuery filter() method to filter jQuery collection and where you can use data() method to get the property.

var groupedItems = $('div[data-group-id="' + groupId + '"]');

var res = groupedItems.filter(function() {
  // since property value starts with {, the data method
  // would parse if it's a valid JSON. So simply get the
  // property from the object and compare
  return $(this).data('info').isAvailable == 'true';
})

edited Dec 14, 2017 at 7:54

answered Dec 14, 2017 at 7:41

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hilda_sonica_vish Over a year ago

has to be return $(this).dataObject('info').isAvailable

Pranav C Balan Over a year ago

@hilda_sonica_vish : since value is string you need to compare

Pranav C Balan Over a year ago

@hilda_sonica_vish : or you need to update the json with boolean instead of string data-info='{"isAvailable": true,"isValid":"false"}'

Hassan Imam · Accepted Answer · 2017-12-14 08:01:02Z

1

You can use filter to filter groupedItems which have isAvailable set to true inside info data attribute. Access data attribute using data().

var groupId = 1;
var groupedItems = $('div[data-group-id="'+groupId+'"]');
var info = groupedItems.filter(function(){ 
  return $(this).data('info').isAvailable == 'true';
});
console.log(info);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-group-id=1 data-info={"isAvailable":"true","isValid":"false"}>foo</div>

answered Dec 14, 2017 at 8:01

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Collectives™ on Stack Overflow

Filter items based on data attribute in jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related