Group and count HTML elements by data attribute in jQuery

Question

I'm trying to group each instance of a data attribute into a list from the number of occurrences of each attribute in a page, using jQuery. Similar to grouping categories or tags in a news section.

For example, I would like to create something like this:

Category 1 (5)
Category 2 (3)
Category 3 (1)

from this html:

<ul class="categories">
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-1">Category 1</li>
   <li data-category="category-2">Category 2</li>
   <li data-category="category-2">Category 2</li>
   <li data-category="category-2">Category 2</li>
   <li data-category="category-3">Category 3</li>
</ul>

How can I achieve this in jQuery? Is it even possible?

Mr.Pohoda · Accepted Answer · 2013-03-09 19:55:44Z

15

It is possible, check this jsFiddle I've created.

var categories = {},
    category;

$('.categories li[data-category]').each(function(i, el){
    category = $(el).data('category');
    if (categories.hasOwnProperty(category)) {
        categories[category] += 1;
    }
    else {
        categories[category] = 1;
    }
});

// print results
for(var key in categories){
    console.log(key + ' (' + categories[key] + ')');
}

answered Mar 9, 2013 at 19:55

Mr.Pohoda

4948 silver badges19 bronze badges

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

Comments

Andreas · Accepted Answer · 2013-03-09 19:43:16Z

5

$(function() {
    var categories = {};
    $(".categories li").each(function() {
        var category = $(this).data("category");

        if (categories.hasOwnProperty(category) === false) {
            categories[category] = 1;
        } else {
            categories[category]++;
        }
    });

    console.log(categories);
})

Example

answered Mar 9, 2013 at 19:43

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Comments

hjpotter92 · Accepted Answer · 2013-03-09 19:46:44Z

2

May be dirty, but it's what I came up with:

var iterate = 1;
$('ul.categories li').each(function (i, v) {
    var thisCat = $(v).data('category');
    if ($('div#' + thisCat).length > 0) {
        $('div#' + thisCat).text(thisCat + ' (' + ++iterate + ')');
    } else {
        iterate = 1;
        var newDiv = '<div id="' + thisCat + '">' + thisCat + ' (1)</div>';
        $('#result').append(newDiv);
    }
});

And, fiddle.

answered Mar 9, 2013 at 19:46

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Comments

klewis · Accepted Answer · 2013-03-09 19:59:39Z

1

One approach is to use jQuery's each method to load each of the sections into array you define prior. Setup your conditions within the each method, collect the data and do whatever your heart desires with each list.

With this method you can set as many variables within this one each method to check for. For example, if there was another attribute you wanted to check within each li element, you can do that and make more lists.

The console.log below, simply gives you a visual on what is stored within each array you define. Good Luck!

And a quick jsFiddle demo.

var cat1 = [];
var cat2 = [];
var cat3 = [];

$('li').each(function () {

var attrvalue = $(this).attr('data-category');

if (attrvalue == "category-1") { 
    cat1.push(attrvalue);
}

if (attrvalue == "category-2") { 
    cat2.push(attrvalue); 
}

if (attrvalue == "category-3") { 
    cat3.push(attrvalue);
} 
});

console.log('how many are here? :'+ cat1);
console.log('how many are here? :'+ cat2);
console.log('how many are here? :'+ cat3);

edited Mar 9, 2013 at 19:59

answered Mar 9, 2013 at 19:41

klewis

8,54816 gold badges70 silver badges113 bronze badges

2 Comments

Michael Giovanni Pumo Over a year ago

Nice effort, but this seems a bit static. You have to manually manage each category.

klewis Over a year ago

Ha! I agree. I wrote this a long time ago and would.do things more efficiently now.

Athafoud · Accepted Answer · 2016-10-12 07:15:21Z

0

If data attribute is on span or div inside <tr> then you have to use find. Find is more costly in term of DOM search. Is better to just add class on that elements where you have data-attribute and loop through and get information.

/*
 * fetch labels from list by data attribute
 * 
 */

function fetch_labels() {

    var leadssource = {},
            lead;

    $('#leads-list tr').each(function(i, el) {

        lead = $(el).find('[data-leadsource]').data('leadsource');
        if (leadssource.hasOwnProperty(lead)) {
            leadssource[lead] += 1;
        }
        else {
            leadssource[lead] = 1;
        }
    });

    return leadssource;
}

edited Oct 12, 2016 at 7:15

Athafoud

3,0603 gold badges45 silver badges61 bronze badges

answered Oct 12, 2016 at 6:03

Furqan Freed

3761 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

Group and count HTML elements by data attribute in jQuery

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related