How to find unique number of data-attribute

Question

I have the following markup:

<ul class="category-item-container">
    <li class="category-item" data-group="bottoms">Jeans</li>
    <li class="category-item" data-group="tops">Shirt</li>
    <li class="category-item" data-group="tops">Hoodie</li>
    <li class="category-item" data-group="bottoms">shorts</li>
    <li class="category-item" data-group="accesories">Hat</li>
    <li class="category-item" data-group="accesories">Hanger</li>
    <li class="category-item" data-group="bottoms">Boxer</li>
    <li class="category-item" data-group="accesories">Tørklæde</li>
    <li class="category-item" data-group="accesories">Solbriller</li>
    <li class="category-item" data-group="bottoms">Bukser</li>
    <li class="category-item" data-group="tops">T-shirt</li>
</ul>

I would like to find the unique number of data-group data-attributes. In this case the number would be 3. I was thinking to turn the list into an array and then loop over the data-group, but I am not sure how that could be done, and if it is the correct way to do it.

Possible duplicate of [Count unique elements in array without sorting](https://stackoverflow.com/questions/15052702/count-unique-elements-in-array-without-sorting) — Lelio Faieta, Jul 20 '18 at 10:25

score 4 · Answer 1 · answered Jul 20 '18 at 10:19

Loop over the elements and add the values of data-group to a set. At the end, check the size of the set.

var set = new Set();

document.querySelectorAll('.category-item-container > .category-item').forEach(item => {
  set.add(item.getAttribute('data-group'));
});

console.log(set.size);

<ul class="category-item-container">
  <li class="category-item" data-group="bottoms">Jeans</li>
  <li class="category-item" data-group="tops">Shirt</li>
  <li class="category-item" data-group="tops">Hoodie</li>
  <li class="category-item" data-group="bottoms">shorts</li>
  <li class="category-item" data-group="accesories">Hat</li>
  <li class="category-item" data-group="accesories">Hanger</li>
  <li class="category-item" data-group="bottoms">Boxer</li>
  <li class="category-item" data-group="accesories">Tørklæde</li>
  <li class="category-item" data-group="accesories">Solbriller</li>
  <li class="category-item" data-group="bottoms">Bukser</li>
  <li class="category-item" data-group="tops">T-shirt</li>
</ul>

score 2 · Accepted Answer · answered Jul 20 '18 at 10:26

Use Set, Array.from and document.querySelectorAll in one line of code

const result = new Set(Array.from(document.querySelectorAll('li[data-group]'), ({dataset:{group}}) => group)).size;

console.log(`there are ${result} unique groups`);

<ul class="category-item-container">
    <li class="category-item" data-group="bottoms">Jeans</li>
    <li class="category-item" data-group="tops">Shirt</li>
    <li class="category-item" data-group="tops">Hoodie</li>
    <li class="category-item" data-group="bottoms">shorts</li>
    <li class="category-item" data-group="accesories">Hat</li>
    <li class="category-item" data-group="accesories">Hanger</li>
    <li class="category-item" data-group="bottoms">Boxer</li>
    <li class="category-item" data-group="accesories">Tørklæde</li>
    <li class="category-item" data-group="accesories">Solbriller</li>
    <li class="category-item" data-group="bottoms">Bukser</li>
    <li class="category-item" data-group="tops">T-shirt</li>
</ul>

Alessio Cantarella · Answer 3 · 2018-07-20T10:32:25.637

You could cycle every li and create an array of unique elements, e.g.:

var groups = [];
document.querySelectorAll("ul.category-item-container li").forEach(v => {
  var group = v.getAttribute("data-group");
  if (!groups.includes(group)) {
    groups.push(group);
  }
});
console.log(groups.length);

<ul class="category-item-container">
    <li class="category-item" data-group="bottoms">Jeans</li>
    <li class="category-item" data-group="tops">Shirt</li>
    <li class="category-item" data-group="tops">Hoodie</li>
    <li class="category-item" data-group="bottoms">shorts</li>
    <li class="category-item" data-group="accesories">Hat</li>
    <li class="category-item" data-group="accesories">Hanger</li>
    <li class="category-item" data-group="bottoms">Boxer</li>
    <li class="category-item" data-group="accesories">Tørklæde</li>
    <li class="category-item" data-group="accesories">Solbriller</li>
    <li class="category-item" data-group="bottoms">Bukser</li>
    <li class="category-item" data-group="tops">T-shirt</li>
</ul>

@JaromandaX you're right: I replaced jQuery with VanillaJS – Alessio Cantarella Jul 20 '18 at 10:33 — Alessio Cantarella, Jul 20 '18 at 10:33

How to find unique number of data-attribute

3 Answers3