DEV Community

loading...
Cover image for Vanilla JavaScript data attribute filters

Vanilla JavaScript data attribute filters

Chris Bongers
Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day πŸ‘Š
Originally published at daily-dev-tips.com ・4 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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

const elements = document.querySelectorAll("li");
Enter fullscreen mode Exit fullscreen mode

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

rating.addEventListener("change", function () {
    // Code here
});
Enter fullscreen mode Exit fullscreen mode

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

let value = rating.value;
// 1,2,3,4, or 5
Enter fullscreen mode Exit fullscreen mode

Then we want to loop over all our list items.

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

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");
  }
}
Enter fullscreen mode Exit fullscreen mode

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");
      }
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

Collapse
lexlohr profile image
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))
Enter fullscreen mode Exit fullscreen mode
Collapse
dailydevtips1 profile image
Chris Bongers Author

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

Collapse
lexlohr profile image
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.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

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!