If value of CMS-item is same as that of another item, don't show the value

Design help Custom code
1

Hi all,

I could really use your help. I’m using a nested collection with names and roles in it. Sometimes it happens that one person has multiple roles, see the image below where K. Stevens has three roles. In that case, I want the name to show up only once (on the left) and all his/her roles (on the right). Does anyone know how I can achieve that?

Schermafbeelding 2022-05-21 om 07.08.57 AM
Schermafbeelding 2022-05-21 om 07.08.57 AM1042×214 11.4 KB

Check my site Read-Only link below. The problem is on the Editorials Template page at the bottom of the page (go to the Editorial Item “_This is an editorial page and this is the title of the article”).

Here is my site Read-Only: https://preview.webflow.com/preview/minimal-collective-bb?utm_medium=preview_link&utm_source=dashboard&utm_content=minimal-collective-bb&preview=46b1eb8aaedbd7c588d5e697922c81cb&workflow=preview

2

I found the solution. First I created a sort for the nested collection list, by using Finsweets Attribute ‘CMS Sort’ and add a (hidden) button with the id and class ‘sort-button’ that functions as the sort-trigger. After that, I added the following code before the tag.

<!-- Sort by name and don't show duplicate names -->
<script>
window.onload = function() {
	document.getElementById('sort-button').click();
  
  const ss = new Set();
  for (const div of document.querySelectorAll(".credits-bottom_item > .credits-bottom_names")) {
    if (ss.has(div.textContent.trim())) {
      div.parentNode.removeChild(div);
    }
    ss.add(div.textContent.trim());
	}
}

</script>