Prevent duplicate CMS items in dynamic filter list

Is there a way to prevent duplicate dynamic, CMS entries used to filter a CMS list?

Scenario:
I’m working on creating a dynamic dropdown CMS filter that will ultimately filter reviews (seen here) by the date they were published (example: July 2020).

The Problem:
Since there are multiple reviews for July 2020, this date shows up multiple times.
ALL of the dates are also showing up on one line.

The Goal:
Is there a way to prevent duplicate entries for my filter dropdown list?
How can I get the dates to populate on separate lines?

Note:
This is part of the @Finsweet CMS Library, but I haven’t been successful in getting a response to this part of my question.

Here is my public share link: live site here
Here is my read-only link: read-only link

Hey @BarbPritchard - Sweet JS and I have sent you a DM in Slack ! Should be no issues to get this working for you

Hello Finsweet team,

I’ve been searching for the same functionality using your library. Would you be able to share the solution?

hey I’m having this same problem duplicate CMS items showing that are nested in a parent collection. Is this something you can share with public?

I have the same problem, can anyone share a solution? This guy Finsweet is very good.

Hey, you’ve been always my salvation. I hope you can save me once again.

How can I filter to remove duplicates from a dynamic list?

I have the same issue, I am also using @Finsweet custom code.

In case anyone is still struggling with this → Create a new CMS List for each of the categories you want to use as filter and then connect the filter collection wrapper to that.

1 Like

Hey All

You can use this snippet if the duplicates are based on text. Replace “.filter-component” with your own class that you wish to loop through.

document.addEventListener("DOMContentLoaded", function dumpDups() {
  const rr = new Set();
  for (const div of document.querySelectorAll(".filter-component")) {
    if (rr.has(div.textContent.trim())) {
      div.parentNode.removeChild(div);
    }
    rr.add(div.textContent.trim());
  }

  dumpDups();
});

Hope this helps ya’ll!

~ Rhino

where to add this snippet? please

Have you found a solution for this?

Simply add it to your Footer Code section.
image

1 Like

Hello, fs team. I’m having this same issue. Any tips you could share?

I have the same problem, can anyone share a solution? This guy Finsweet is very good.