# HubDB filter

**URL:** <https://community.hubspot.com/t/hubdb-filter/61387>\
**Category:** CMS Development\
**Tags:** design-manager, hubdb, html\
**Created:** [July 20, 2022, 7:51pm UTC](https://community.hubspot.com/t/hubdb-filter/61387 "2022-07-20T19:51:29Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 20, 2022, 7:51pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/1 "2022-07-20T19:51:29Z")

</div>

Hello,  
I’m working on a resource library using HubDB. I got most of the things working, except the filters by content\_type. Filters display but I’m not sure if the URL ?topic=Case%20Study is created and shows only the resources type = Case Study.

```lia-code-sample
<div class="resource-cards-module">
 {% if module.show_filters %}
 <div class="filters">
 <div class="filter-by-type">

 <select name="topic">
 <option value="">View Resources By Type</option>
 {% for content_type in resource_content_type|map(attribute='content_type') %}
 {% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
 <option>{{ content_type.name }}</option>
 {% endfor %}
 </select>
 <script>
 jQuery('select[name=topic').on('change',function(){
 let topic = jQuery(this).val();
 if(topic !='') {
 document.location.href='{{module.resources_page_link.url.href}}?topic={{tag}}'+topic;
 } 
 });
 </script>
 </div>
 <div class="search-articles">
 {% icon name="search" style="SOLID" %}
 <input type="text" name="search" placeholder="Search Resources" value="" />
 </div>
 </div>
 {% endif %}
 {% if module.headline %}<h2 class="text-center light">{{ module.headline }}</h2>{% endif %}
 <div class="grid">
 {% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}
 <div class="grid-item">
 <a href="{{ row.link }}" class="item-link"></a>
 <div class="item-image-wrapper">
 <div class="item-image" style="background-image: url('{{ row.featured_image.url }}');"></div>
 </div>
 <div class="item-content">
 <h3>{{ row.name }}</h3>
 {{ row.description|truncatehtml(150) }}
 <hr />
 {% if row.content_type %}
 <div class="resource-topics">
 {% for tag in row.content_type.name|split(',') %}
 <a class="resource-topic-link" href="{{module.resources_page_link.url.href}}?topic={{tag}}">{{ tag }}</a>{% if not loop.last %},{% endif %}
 {% endfor %}
 </div>
 {% endif %}
 </div>
 </div>
 {% endfor %}
 </div>
</div>

```

Any help is appreciated!

Thanks in advance,  
Jonathan

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 20, 2022, 8:55pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/2 "2022-07-20T20:55:34Z")

</div>

Hi Jonathan,

Not sure if this is the solution, but it’s the first thing I noticed - it looks to me like these two lines may be in the wrong order:

```auto
{% for content_type in resource_content_type|map(attribute='content_type') %}
 {% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}

```

You’re doing the for content\_type in resource\_content\_type but it hasn’t been set yet.

Edit:

`jQuery('select[name=topic').on('change',function(){`

Should also be:

`jQuery('select[name="topic"]').on('change',function(){`

Missing closing ‘]’ and the quotes on topic may matter

* * *

[u][

**Barry Grennan**

]([SEO Anseo | Freelance Hubspot CMS Development Specialist](https://www.seoanseo.ca?utm_source=HubSpotCommunity))[/u]

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 20, 2022, 9:01pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/3 "2022-07-20T21:01:13Z")

</div>

@BarryGrennan Thanks for your reply. Should it be:

```lia-code-sample
{% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
{% for content_type in resource_content_type|map(attribute='content_type') %}

```

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 20, 2022, 9:14pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/4 "2022-07-20T21:14:55Z")

</div>

I would have thought so, yeah.

Because you’re doing a for loop base on resource\_content\_type but it hasn’t been set yet.  
Also just to note that I edited my reply (I think just before you replied) to mention that your jQuery may not work due to missing closing bracket, etc.

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 20, 2022, 9:18pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/5 "2022-07-20T21:18:20Z")

</div>

@BarryGrennan Thanks for your reply.

I updated the code, but I’m not sure if the filter works. Do you know if it would work on a preview page?

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 20, 2022, 9:58pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/6 "2022-07-20T21:58:54Z")

</div>

I think this should work:

```lia-code-sample
<div class="filters">
 <div class="filter-by-type">

 <select name="topic">
 <option value="">View Resources By Type</option>
 {% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
 {% for content_type in resource_content_type|map(attribute='content_type') %}
 <option>{{ content_type }}</option>
 {% endfor %}
 </select>
 <script>
 jQuery('select[name="topic"]').on('change',function(){
 let topic = jQuery(this).val();
 if(topic !='') {
 document.location.href='{{module.resources_page_link.url.href}}?topic='+topic;
 } 
 });
 </script>
 </div>

```

It worked in a very quick test I ran on my portal. I removed the “.name” from the option. My column “content\_type” was just a text input, what type of input is yours that it has a name attribute, I’ll test that out too.

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 20, 2022, 10:14pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/7 "2022-07-20T22:14:11Z")

</div>

@BarryGrennan I added the code and this is how it is displaying

 ![resources-code-1.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/e/5ecaaa6a6981821541d57ce180e662778f674218.jpeg)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 20, 2022, 10:30pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/8 "2022-07-20T22:30:40Z")

</div>

What type of field is the content\_type column in the HubDB?

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 20, 2022, 10:33pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/9 "2022-07-20T22:33:35Z")

</div>

@BarryGrennan It is a select

 ![resources-table-1.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/f/6f347fd3163d3efb47b7889885d1c3a2678ab1a8.png)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 20, 2022, 10:38pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/10 "2022-07-20T22:38:57Z")

</div>

Ok, then this works for me, putting the .name back in:

```lia-code-sample
<div class="filters">
 <div class="filter-by-type">

 <select name="topic">
 <option value="">View Resources By Type</option>
 {% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
 {% for content_type in resource_content_type|map(attribute='content_type') %}
 <option>{{ content_type.name }}</option>
 {% endfor %}
 </select>
 <script>
 jQuery('select[name="topic"]').on('change',function(){
 let topic = jQuery(this).val();
 if(topic !='') {
 document.location.href='{{module.resources_page_link.url.href}}?topic='+topic;
 } 
 });
 </script>
 </div>

```

But yes you’d need to publish the page or your document.location.href will 404

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 20, 2022, 10:44pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/11 "2022-07-20T22:44:59Z")

</div>

@BarryGrennan Thanks for all your help! that fixed the display issue, but now I have a new issue 😓  
I added more resources with the same content\_type and it just shows the same filter option multiple times.

 ![Screen Shot 2022-07-20 at 6.44.03 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/9/6912dbae39021ba66e448973d1815c3960db989a.jpeg)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 20, 2022, 11:01pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/12 "2022-07-20T23:01:41Z")

</div>

I’d suggest you create an array instead and add to it “unless” the entry is already there. That’ll rule out duplicates.  
Then loop that array for the options

So like:

```lia-code-sample
 {% set content_type_array = [] %}
 {% for content_type in resource_content_type|map(attribute='content_type') %}
 {% unless content_type.name in content_type_array %}
 {% unless content_type.name == null %}
 {% do content_type_array.append(content_type.name) %}
 {% endunless %}
 {% endunless %}
 {% endfor %}

```

Then in your options you’d loop through the array instead:

```lia-code-sample
 {% for item in content_type_array %}
 <option>{{ item }}</option>
 {% endfor %}

```

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 21, 2022, 1:07am UTC](https://community.hubspot.com/t/hubdb-filter/61387/13 "2022-07-21T01:07:26Z")

</div>

@BarryGrennan I’m sorry, I don’t know how to implement the array.  
Does that code replace the \<select\>?  
\*EDIT\* The code you suggested got rid of the duplicates 🙌 but I published the page to test the actual filtering ?topic and it does not work 😫.  
Any help is appreciated!

```lia-code-sample
<select name="topic">
<option value="">View Resources By Type</option>
{% set content_type_array = [] %}
{% for content_type in resource_content_type|map(attribute='content_type') %}
{% unless content_type.name in content_type_array %}
 {% unless content_type.name == null %}
 {% do content_type_array.append(content_type.name) %}
 {% endunless %}
{% endunless %}
{% endfor %}
{% for item in content_type_array %}
 <option>{{ item }}</option>
{% endfor %}
</select>

```

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 21, 2022, 1:44am UTC](https://community.hubspot.com/t/hubdb-filter/61387/14 "2022-07-21T01:44:42Z")

</div>

Did you resolve the jQuery issue I pointed out? Is the page reloading on change with e.g. ?topic=Guide at the end of the url?

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 21, 2022, 1:51am UTC](https://community.hubspot.com/t/hubdb-filter/61387/15 "2022-07-21T01:51:04Z")

</div>

@BarryGrennan It is, but all the resources are displaying instead of ?topic=Guide  
I just noticed that the \<option\> doesn’t have any value=“”

 ![Screen Shot 2022-07-20 at 10.06.03 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/c/1cef6bd60ad5ba4d7350e3f030c405e44ed6a7d8.jpeg)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 21, 2022, 2:36am UTC](https://community.hubspot.com/t/hubdb-filter/61387/16 "2022-07-21T02:36:26Z")

</div>

You’re not setting anything to filter the entries in your loop that creates the posts  
So this:

` {% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}`

Needs to call in your string from the url:

```lia-code-sample
// You need to do an if statment to account for the fact that it may not be set:

{% if request.query_dict.topic %}
 {% set tableQuery = hubdb_table_rows(module.hubdbtable_field, 'content_type='+request.query_dict.topic) %}
 {% else %}
 {% set tableQuery = hubdb_table_rows(module.hubdbtable_field) %}
 {% endif %}

// I haven't included your other parameters but you can add then in yourself

```

Then you’d replace your:

```lia-code-sample
{% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}

```

with:

` {% for row in tableQuery %}`

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 21, 2022, 3:11am UTC](https://community.hubspot.com/t/hubdb-filter/61387/17 "2022-07-21T03:11:26Z")

</div>

@BarryGrennan Thank you so much! The code above worked.  
Is there a way to keep the active filter displayed after the page reloads ?topic=eBook

 ![Screen Shot 2022-07-20 at 11.09.29 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/3/e3a0d81a60d55150c51b85c88805d73d7b57badd.png)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [July 21, 2022, 12:50pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/18 "2022-07-21T12:50:53Z")

</div>

Play around with the {% if request.query\_dict.topic %}  
If the request.query\_dict.topic equals the {{ item }} in your option add “selected” to the option.  
If I’ve helped solve your problem, it’d be great if you could mark one of my answers as the solution 🙂

---

<div class="post-metadata">

**Author:** ![jpineda91](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jpineda91](https://community.hubspot.com/u/jpineda91)\
**Post date:** [July 21, 2022, 9:22pm UTC](https://community.hubspot.com/t/hubdb-filter/61387/19 "2022-07-21T21:22:43Z")

</div>

@BarryGrennan I added this code:

`{% if request.query_dict.topic == item %} selected{% endif %}`

And it works! Thank you so much for all your help!