Vanilla JavaScript data attribute filters

Today we will be creating a custom filter element based on data attributes in Vanilla JavaScript.

This means that we will have a filter mechanism select list and a list of elements with specific data-attributes on them.

The end result will look like this Codepen. (Choose an option to see the effect)

HTML Structure

We need a select list for the dropdown and a ul with random list ratings to get started.

It will look something like this:

<select id="rating">
  <option value="">Choose a rating</option>
  <option value="5">Minimum 5 stars</option>
  <option value="4">Minimum 4 stars</option>
  <option value="3">Minimum 3 stars</option>
  <option value="2">Minimum 2 stars</option>
  <option value="1">Minimum 1 stars</option>
</select>

<ul>
  <li data-rating="4"><span>item 1</span><i>rating 4</i></li>
  <li data-rating="2"><span>item 2</span><i>rating 2</i></li>
  <li data-rating="3"><span>item 3</span><i>rating 3</i></li>
  <li data-rating="1"><span>item 4</span><i>rating 1</i></li>
  <li data-rating="4"><span>item 5</span><i>rating 4</i></li>
  <li data-rating="1"><span>item 6</span><i>rating 1</i></li>
  <li data-rating="4"><span>item 7</span><i>rating 4</i></li>
  <li data-rating="4"><span>item 8</span><i>rating 4</i></li>
  <li data-rating="1"><span>item 9</span><i>rating 1</i></li>
  <li data-rating="5"><span>item 10</span><i>rating 5</i></li>
  <li data-rating="1"><span>item 11</span><i>rating 1</i></li>
  <li data-rating="2"><span>item 12</span><i>rating 2</i></li>
  <li data-rating="3"><span>item 13</span><i>rating 3</i></li>
  <li data-rating="1"><span>item 14</span><i>rating 1</i></li>
  <li data-rating="3"><span>item 15</span><i>rating 3</i></li>
  <li data-rating="5"><span>item 16</span><i>rating 5</i></li>
  <li data-rating="3"><span>item 17</span><i>rating 3</i></li>
  <li data-rating="5"><span>item 18</span><i>rating 5</i></li>
  <li data-rating="1"><span>item 19</span><i>rating 1</i></li>
  <li data-rating="2"><span>item 20</span><i>rating 2</i></li>
</ul>

For now let's get cracking in making this look a little bit better.

CSS Styling

select {
  margin: 50px auto;
  display: block;
}
ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ba3b46;
  flex-direction: column;
  height: 100px;
}
ul li.hidden {
  display: none;
}
ul span {
  font-weight: bold;
  margin-bottom: 20px;
}

We set some margin on the select element to space it out a little bit better.
Then we convert the ul into a grid with four columns.
And make the list items nicer, and a bit more spacious.

Vanilla JavaScript data-attribute filter

Now, let's enter the magic part, JavaScript.

First, we want to get the select item by its ID.

const rating = document.getElementById("rating");

The next thing we need is the list items. We use a querySelectorAll to get them.

const elements = document.querySelectorAll("li");

Let's add an eventListener to our select item. It will be called every time the value changes.

rating.addEventListener("change", function () {
    // Code here
});

Inside that, we need to get the value of the rating first.

let value = rating.value;
// 1,2,3,4, or 5

Then we want to loop over all our list items.

[...elements].forEach((element) => {
    // Code here
});

Within this block, we want to check if we have a value at all. Else we need to reset all the items.

Once we have a value, we must check if the rating is lower than the value.

if (value === "") {
    // Select empty option
  element.classList.remove("hidden");
} else {
    // Get the rating for this list item
  const rating = element.dataset.rating;
  // Check if the rating is lower than the value
  if (!rating || rating < value) {
      // Hide the element
    element.classList.add("hidden");
  } else {
      // Show the element
    element.classList.remove("hidden");
  }
}

The whole code will look like this:

const rating = document.getElementById("rating");
const elements = document.querySelectorAll("li");

rating.addEventListener("change", function () {
  let value = rating.value;
  [...elements].forEach((element) => {
    if (value === "") {
      element.classList.remove("hidden");
    } else {
      const rating = element.dataset.rating;
      if (!rating || rating < value) {
        element.classList.add("hidden");
      } else {
        element.classList.remove("hidden");
      }
    }
  });
});

There you go. We now have a vanilla JavaScript filter based on data-attributes.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Alex Lohr]

Or you let CSS do the job and just create a style tag with the required definitions:

const ratingStyleContainer = document.createElement('div')
ratingStyleContainer.style.display = 'none'
document.body.appendChild(ratingStyleContainer)
const ratingSelector = (minRating) => [...Array(5)].reduce(
  (full, _, index) => index + 1 < minRating 
    ? [...full, `[data-rating="${index + 1}"]`]
    : full,
  [] 
).join(', ')
const showOnlyRatings = (minRating) => {
  console.log(ratingSelector(minRating))
  ratingStyleContainer.innerHTML = minRating > 1
    ? `<style>${ratingSelector(minRating)} { display: none; }</style>`
    : ''
}
const rating = document.getElementById('rating')
rating.addEventListener("change", () => showOnlyRatings(+rating.value))

[Chris Bongers]

That's another way of doing it haha
Just wanted to showcase the interaction between javascript and data attributes again.

[Alex Lohr]

And it was a nice example. I just find that a lot of front end developers tend to use JS for everything, even if HTML, SVG or CSS are better suited to do the job. We're so pampered by our high-level frameworks that we easily forget the low-level stuff.

[Chris Bongers]

Your right, there are so many options of doing certain things, might not always be the "best' solution sometimes it's indeed about finding the perfect solution for that specific time and use case.

Well said Alex!