# Display Multi Select Items from a HubDB Separately

**URL:** <https://community.hubspot.com/t/display-multi-select-items-from-a-hubdb-separately/121491>\
**Category:** CMS Development\
**Tags:** design-manager, hubdb\
**Created:** [November 27, 2024, 2:23pm UTC](https://community.hubspot.com/t/display-multi-select-items-from-a-hubdb-separately/121491 "2024-11-27T14:23:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Woodsy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/woodsy/32/63860_2.png) [@Woodsy](https://community.hubspot.com/u/Woodsy)\
**Post date:** [November 27, 2024, 2:23pm UTC](https://community.hubspot.com/t/display-multi-select-items-from-a-hubdb-separately/121491/1 "2024-11-27T14:23:21Z")

</div>

Hi  
I am creating a resource listing with filters. I am calling from a HubDb and am having trouble with a for loop with displying topics for each listing. If the item is tagged with one topic it shows in the filter dropdown. If another item has the same tag it doesn’t sow in the filter dropdown. that works fine. The problem is if the item is tagged with more than one tag it added both tags as one entry which then shows in the filter and also in the orange highlight tab on the listing card. Is there a way to display to make each tag display seperatly if the item has more than one tag?  
Here is the code that checks the item in the HubDB to see if the tag (topic) is unique. If it is it shows it if not it doesn’t show it.

```lia-code-sample
<div class="checkboxes_outer" id="category_filter_data">
 {% set uniqueCategories = [] %}
 {% for item in module.contents %}
 {% if item.resource.columns.topic not in uniqueCategories %}
 {% set _ = uniqueCategories.append(item.resource.columns.topic) %}
 <div class="form-check">
 <input class="form-check-input" type="checkbox" name="category" value="{% for topic in item.resource.columns.topic %} {{ topic.name }} {% endfor %}" id="category_{% for topic in item.resource.columns.topic %} {{ topic.name }} {% endfor %}">
 <label class="form-check-label" for="category_{% for topic in item.resource.columns.topic %} {{ topic.name }} {% endfor %}">{% for topic in item.resource.columns.topic %} {{ topic.name }} {% endfor %}</label>
 </div>
 {% endif %}
 {% endfor %}
 </div>

```

This is the column in the database:

 ![Screenshot 2024-11-27 140304.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/c/0cc1a031a3f6175187328af02b7335118cb590c9.png)

I’m hoping that there is a way to be able to check if the item is tagged by more than one tag in the database it seperates them out as two seperate tags rather than combining the two tags and then displaying the amalgamation as it will be treated as unique.  
This is what the current dropdown looks like:

 ![Screenshot 2024-11-27 140410.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/a/eacf7e21526c12d18280a901b63ccfa8ef64372d.jpeg)

The filter has Consumer Rebates B2B Rebates as the fourth option. If the tags were treated as seperate Consumer Rebates wouldn’t show as it is not unique but B2B Rebates would show.

Thanks in advance for any help.

---

<div class="post-metadata">

**Author:** ![PamCotton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pamcotton/32/47916_2.png) [@PamCotton](https://community.hubspot.com/u/PamCotton)\
**Post date:** [November 27, 2024, 9:29pm UTC](https://community.hubspot.com/t/display-multi-select-items-from-a-hubdb-separately/121491/2 "2024-11-27T21:29:17Z")

</div>

Hey @Woodsy, happy Wednesday!

To display each tag separately in your filters and listing cards, you need to loop through the multi-select field items individually. Instead of treating the entire field as a single entity, iterate over each tag, check if it’s unique, and then display it. This ensures no duplicates and avoids combining multiple tags into one entry.

To our top experts, @DanielSanchez and @Anton do you have any recommendations for @Woodsy matter?

Thank you,

Pam

---

<div class="post-metadata">

**Author:** ![GiantFocal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/giantfocal/32/41969_2.png) [@GiantFocal](https://community.hubspot.com/u/GiantFocal)\
**Post date:** [November 28, 2024, 6:40am UTC](https://community.hubspot.com/t/display-multi-select-items-from-a-hubdb-separately/121491/3 "2024-11-28T06:40:38Z")

</div>

The issue you’re encountering occurs because you’re treating the multi-select topic field (an array) as a single item. This results in multiple tags being concatenated together instead of being handled individually.

To solve this issue, you need to loop through the items in module.contents and then extract each tag (topic) individually and check if the tag is unique before adding it to the dropdown.

Here’s the updated code you can try:

```lia-code-sample
<div class="checkboxes_outer" id="category_filter_data">
{% set uniqueCategories = [] %}
{% for item in module.contents %}
{% for topic in item.resource.columns.topic %}
{% if topic.name not in uniqueCategories %}
{% set _ = uniqueCategories.append(topic.name) %}
<div class="form-check">
<input class="form-check-input" type="checkbox" name="category" value="{{ topic.name }}" id="category_{{ topic.name }}">
<label class="form-check-label" for="category_{{ topic.name }}">{{ topic.name }}</label>
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>

```

---

<div class="post-metadata">

**Author:** ![Woodsy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/woodsy/32/63860_2.png) [@Woodsy](https://community.hubspot.com/u/Woodsy)\
**Post date:** [November 28, 2024, 10:20am UTC](https://community.hubspot.com/t/display-multi-select-items-from-a-hubdb-separately/121491/4 "2024-11-28T10:20:42Z")

</div>

Hi **Ernesto @ [GiantFocal](https://www.giantfocal.com/)**

Thank you for your reply. The code has seperated out the topics in the dropdown. When I check one of the options in the dropdown rather than filtering the results nothing is shown

 ![Screenshot 2024-11-28 094532.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/2/420eb43e1a5e688dfc0557e5655803a9064ad11e.png)

Here is the script for the page:

```lia-code-sample
<script>
 window.addEventListener('DOMContentLoaded', function() {
 var labels = document.querySelectorAll('.labels');
 labels.forEach(function(label) {
 label.addEventListener('click', function() {
 this.classList.toggle('toggled');
 });
 });
 });

 document.addEventListener('DOMContentLoaded', function() {
 document.body.addEventListener('click', function(event) {
 var target = event.target;
 if (!target.closest('#category_filter_data') && !target.closest('#type_filter_data') && !target.closest('#business_outcomes_filter_data') && !target.closest('.labels')) {
 hideFilterData('category_filter_data');
 hideFilterData('type_filter_data');
 hideFilterData('business_outcomes_filter_data');
 }
 });

 function hideFilterData(filterId) {
 var filterData = document.getElementById(filterId);
 filterData.style.maxHeight = '0';
 filterData.style.opacity = '0';
 filterData.style.overflow = 'hidden';
 }

 hideFilterData('category_filter_data');
 var categoryLabel = document.getElementById('category_label');
 categoryLabel.addEventListener('click', function() {
 toggleFilterData('category_filter_data');
 });

 hideFilterData('type_filter_data');
 var typeLabel = document.getElementById('type_label');
 typeLabel.addEventListener('click', function() {
 toggleFilterData('type_filter_data');
 });

 hideFilterData('business_outcomes_filter_data');
 var business_outcomesLabel = document.getElementById('business_outcomes_label');
 business_outcomesLabel.addEventListener('click', function() {
 toggleFilterData('business_outcomes_filter_data');
 });

 function toggleFilterData(filterId) {
 var filterData = document.getElementById(filterId);
 if (filterData.style.maxHeight === '0px') {
 filterData.style.maxHeight = filterData.scrollHeight + 'px';
 filterData.style.opacity = '1';
 filterData.style.padding = '10px'; //Added Line of Code JW
 filterData.style.maxHeight = 'fit-content'; //Added Line of Code JW 
 } else {
 filterData.style.maxHeight = '0';
 filterData.style.opacity = '0';
 filterData.style.padding = '0px'; //Added Line of Code JW
 }
 }
 });

 function filterResources() {
 var selectedCategories = Array.from(document.querySelectorAll('input[name="category"]:checked')).map(function(checkbox) {
 return checkbox.value;
 });
 var selectedTypes = Array.from(document.querySelectorAll('input[name="type"]:checked')).map(function(checkbox) {
 return checkbox.value;
 });
 var selectedBusinessOutcomes = Array.from(document.querySelectorAll('input[name="business_outcomes"]:checked')).map(function(checkbox) {
 return checkbox.value;
 });
 updateAppliedFilters(selectedCategories, selectedTypes, selectedBusinessOutcomes);
 var contents = document.querySelectorAll('.content');
 contents.forEach(function(content) {
 var category = content.dataset.category;
 var type = content.dataset.type;
 var business_outcomes = content.dataset.business_outcomes;
 if ((selectedCategories.length === 0 || selectedCategories.includes(category)) && (selectedTypes.length === 0 || selectedTypes.includes(type)) && (selectedBusinessOutcomes.length === 0 || selectedBusinessOutcomes.includes(business_outcomes))) {
 content.style.display = 'block';
 } else {
 content.style.display = 'none';
 }
 });
 updatePagination();
 }

 function updateAppliedFilters(categories, types, business_outcomes) {
 var appliedFilters = document.getElementById('appliedFilters');
 appliedFilters.innerHTML = '';
 categories.forEach(function(category) {
 var filterBadge = createFilterBadge(category, 'category');
 appliedFilters.appendChild(filterBadge);
 });
 types.forEach(function(type) {
 var filterBadge = createFilterBadge(type, 'type');
 appliedFilters.appendChild(filterBadge);
 });
 business_outcomes.forEach(function(business_outcomes) {
 var filterBadge = createFilterBadge(business_outcomes, 'business_outcomes');
 appliedFilters.appendChild(filterBadge);
 });
 }

 function createFilterBadge(value, filterType) {
 var label = "";
 if (filterType === 'category') {
 label = "{{ module.other_text.category_label }}"
 } else if (filterType === 'type') {
 label = "{{ module.other_text.type_label }}"
 } else if (filterType === 'business_outcomes') {
 label = "{{ module.other_text.business_outcomes_label }}"
 }
 var filterBadge = document.createElement('div');
 filterBadge.classList.add('badge', 'me-2', 'mb-2');
 filterBadge.textContent = "".concat(label, ": ").concat(value);
 var closeButton = document.createElement('button');
 closeButton.classList.add('btn-close', 'btn-close-dark', 'ms-2');
 closeButton.setAttribute('aria-label', 'Close');
 closeButton.addEventListener('click', function() {
 removeFilter(value, filterType)
 });
 filterBadge.appendChild(closeButton);
 return filterBadge;
 }

 function removeFilter(value, filterType) {
 var checkboxes = document.querySelectorAll('input[name="' + filterType + '"][value="' + value + '"]');
 checkboxes.forEach(function(checkbox) {
 checkbox.checked = false;
 });
 filterResources();
 }

 function debounce(func, delay) {
 let timeoutId;
 return function() {
 const context = this;
 const args = arguments;
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => {
 func.apply(context, args)
 }, delay);
 }
 }

 const debouncedSearch = debounce(searchResources, 300);
 var searchInput = document.getElementById('searchInput');
 searchInput.addEventListener('input', function() {
 debouncedSearch()
 });

 function highlightText(element, searchTerm) {
 var innerHTML = element.innerHTML;
 var regex = new RegExp('(' + searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
 var tempDiv = document.createElement('div');
 tempDiv.innerHTML = innerHTML;

 function recursiveHighlight(node) {
 if (node.nodeType === 3) { // Text node
 var text = node.nodeValue;
 if (regex.test(text)) {
 var highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
 var span = document.createElement('span');
 span.innerHTML = highlightedText;
 node.parentNode.replaceChild(span, node);
 }
 } else { // Element node
 for (var i = 0; i < node.childNodes.length; i++) {
 recursiveHighlight(node.childNodes[i]);
 }
 }
 }

 recursiveHighlight(tempDiv);
 element.innerHTML = tempDiv.innerHTML;
 }

 function removeHighlights(element) {
 function recursiveRemoveHighlight(node) {
 if (node.nodeType === 1) { // Element node
 if (node.classList.contains('highlight')) {
 var parent = node.parentNode;
 while (node.firstChild) {
 parent.insertBefore(node.firstChild, node);
 }
 parent.removeChild(node);
 } else {
 for (var i = 0; i < node.childNodes.length; i++) {
 recursiveRemoveHighlight(node.childNodes[i]);
 }
 }
 }
 }

 recursiveRemoveHighlight(element);
 }

 function searchResources() {
 var searchTerm = searchInput.value.trim().toLowerCase();
 var contents = document.querySelectorAll('.content');
 contents.forEach(function(content) {
 var headlineElement = content.querySelector('.headline a'); // Select the anchor tag directly
 var descriptionElement = content.querySelector('.description_outer');
 var headlineText = headlineElement.textContent.trim().toLowerCase();
 var descriptionText = descriptionElement.textContent.trim().toLowerCase();
 if (searchTerm === '') {
 content.style.display = 'block';
 removeHighlights(headlineElement);
 removeHighlights(descriptionElement);
 } else {
 removeHighlights(headlineElement); // Clear existing highlights
 removeHighlights(descriptionElement); // Clear existing highlights
 if (headlineText.includes(searchTerm) || descriptionText.includes(searchTerm)) {
 highlightText(headlineElement, searchTerm);
 highlightText(descriptionElement, searchTerm);
 content.style.display = 'block';
 } else {
 content.style.display = 'none';
 }
 }
 });
 updatePagination();
 }

 function updatePagination() {
 var visibleContents = document.querySelectorAll('.content:not([style*="display: none"])');
 var paginationArea = document.querySelector('.pagination_area');
 var totalPages = Math.ceil(visibleContents.length / {{ module.style.contents.contents_to_display_at_a_time }});
 var currentPage = 1;
 paginationArea.innerHTML = '';
 for (var i = 1; i <= totalPages; i++) {
 var pageLink = document.createElement('a');
 pageLink.href = '#';
 pageLink.textContent = i;
 pageLink.dataset.page = i;
 pageLink.addEventListener('click', function(e) {
 e.preventDefault();
 var pageNum = parseInt(this.dataset.page);
 currentPage = pageNum;
 showPage(pageNum, visibleContents);
 highlightActivePage(currentPage);
 });
 paginationArea.appendChild(pageLink);
 }
 var previousLink = document.createElement('a');
 previousLink.href = '#';
 previousLink.textContent = "{{ module.other_text.pagination_previous_button_text }}";
 previousLink.addEventListener('click', function(e) {
 e.preventDefault();
 if (currentPage > 1) {
 currentPage--;
 showPage(currentPage, visibleContents);
 highlightActivePage(currentPage);
 }
 });
 paginationArea.insertBefore(previousLink, paginationArea.firstChild);
 var nextLink = document.createElement('a');
 nextLink.href = '#';
 nextLink.textContent = "{{ module.other_text.pagination_next_button_text }}";
 nextLink.addEventListener('click', function(e) {
 e.preventDefault();
 if (currentPage < totalPages) {
 currentPage++;
 showPage(currentPage, visibleContents);
 highlightActivePage(currentPage);
 }
 });
 paginationArea.appendChild(nextLink);
 showPage(1, visibleContents);
 highlightActivePage(1);
 }

 function highlightActivePage(currentPageNum) {
 var pageLinks = document.querySelectorAll('.pagination_area a');
 pageLinks.forEach(function(link) {
 var pageNum = parseInt(link.dataset.page);
 if (pageNum === currentPageNum) {
 link.classList.add('active');
 } else {
 link.classList.remove('active');
 }
 });
 }

 function showPage(pageNum, visibleContents) {
 var startIndex = (pageNum - 1) * {{ module.style.contents.contents_to_display_at_a_time }};
 var endIndex = startIndex + {{ module.style.contents.contents_to_display_at_a_time }};
 visibleContents.forEach(function(content, index) {
 if (index >= startIndex && index < endIndex) {
 content.style.display = 'block';
 } else {
 content.style.display = 'none';
 }
 });
 }

 window.addEventListener('DOMContentLoaded', function() {
 updatePagination();
 });

 document.querySelectorAll('input[name="category"], input[name="type"], input[name="business_outcomes"]').forEach(function(checkbox) {
 checkbox.addEventListener('change', filterResources);
 });
</script>

```

As we are now extracting each tag (topic) individually is there anything in the script that I need to update, so that the filter checks against the entry in the database and displays if tagged with the topic?

Thanks