I'm creating a page to list webinars from the past few years. So I created a table in HubDB with columns -Name, Date, Year, Description and Topic. There is a dropdown in the page which filters the content based on 'Topic'. I was able to implement the function manually using jQuery, HubL code and HubDB.
My requirement is to remove the duplicate entry from the dropdown list.
dic 2, 202211:31 AM - editado dic 2, 202211:33 AM
Experto reconocido | Partner nivel Elite
Remove duplicate entry from HubDB table
resolver
Aand I'm still half asleep cause I forgot you need to access the options. So instead of looping through just 'column' you need to loop through 'column.options'.
<select class="form-control cat1">
<option value="cat-all">All Topics</option>
{% set column = hubdb_table_column(5620116, "topic") %}
{% for topic in column.options %}
<option value="cat-{{ topic.name }}">{{ topic.label }}</option>
{% endfor %}
</select>
If this answer solved your question, please mark it as the solution.
The data returned for the column itself would be the same so you're category dropdown code wouldn't change.
For the item for loop where you're outputting the item's categories there's a couple different ways for outputting them:
1. For where you're just listing them in the div you can use map to get the name attribute and join to output the array as a string (setting it to join with a <br> will put a <br> between each item).
2. You could just do the same as above but add |lower at the end to make them lowercase (as would be conventional for class names), but in case you have spaces in any of your category names you would want to replace those spaces with a dash which we would need to loop through the categories to do.
{% for item in module.webinar_content %}
// create an empty array to push the modified names to
{% set category_classes = [] %}
// loop through your categories mapped to 'name'
{% for category in item.ondemand_row.columns.topic|map("name") %}
// append the modified (lowercase and replace spaces with dash) category to the array
{% do category_classes.append(category|lower|replace(' ','-')) %}
{% endfor %}
// join the array with a space to add to your class list
<div class="f-cat {{ category_classes|join(' ') }}">
// the visible list can be mapped and joined directly without a loop
{{ item.ondemand_row.columns.topic|map('name')|join('<br>') }}
{{ item.ondemand_row.columns.name }}<br>
{{ item.ondemand_row.columns.date }}, {{ item.ondemand_row.columns.year.name }}<br>
<img src="{{ item.ondemand_row.columns.image.url }}" alt="{{ item.ondemand_row.columns.name }}" width="200"><br>
{{ item.ondemand_row.columns.description }}<br><br>
<a href="{{ item.ondemand_row.columns.url }}">{{ module.cta }}</a>
</div>
{% endfor %}
Not sure what you're using the data-cat attributes for so I've left those out but you should be able to use the above as a reference for any other usage of the column.
If this answer solved your question, please mark it as the solution.
The data returned for the column itself would be the same so you're category dropdown code wouldn't change.
For the item for loop where you're outputting the item's categories there's a couple different ways for outputting them:
1. For where you're just listing them in the div you can use map to get the name attribute and join to output the array as a string (setting it to join with a <br> will put a <br> between each item).
2. You could just do the same as above but add |lower at the end to make them lowercase (as would be conventional for class names), but in case you have spaces in any of your category names you would want to replace those spaces with a dash which we would need to loop through the categories to do.
{% for item in module.webinar_content %}
// create an empty array to push the modified names to
{% set category_classes = [] %}
// loop through your categories mapped to 'name'
{% for category in item.ondemand_row.columns.topic|map("name") %}
// append the modified (lowercase and replace spaces with dash) category to the array
{% do category_classes.append(category|lower|replace(' ','-')) %}
{% endfor %}
// join the array with a space to add to your class list
<div class="f-cat {{ category_classes|join(' ') }}">
// the visible list can be mapped and joined directly without a loop
{{ item.ondemand_row.columns.topic|map('name')|join('<br>') }}
{{ item.ondemand_row.columns.name }}<br>
{{ item.ondemand_row.columns.date }}, {{ item.ondemand_row.columns.year.name }}<br>
<img src="{{ item.ondemand_row.columns.image.url }}" alt="{{ item.ondemand_row.columns.name }}" width="200"><br>
{{ item.ondemand_row.columns.description }}<br><br>
<a href="{{ item.ondemand_row.columns.url }}">{{ module.cta }}</a>
</div>
{% endfor %}
Not sure what you're using the data-cat attributes for so I've left those out but you should be able to use the above as a reference for any other usage of the column.
If this answer solved your question, please mark it as the solution.
Is module.webinar_content referring to the entire table? For the dropdown if you're wanting to list the available topics in a column it'd make most sense to loop through just the column options itself instead of the rows using hubdb_table_column.
{% set column = hubdb_table_column(<tableId or name>, <columnId or column name>) %}
{% for topic in column %}
<option></option>
{% endfor %}
If this answer solved your question, please mark it as the solution.
dic 2, 202211:31 AM - editado dic 2, 202211:33 AM
Experto reconocido | Partner nivel Elite
Remove duplicate entry from HubDB table
resolver
Aand I'm still half asleep cause I forgot you need to access the options. So instead of looping through just 'column' you need to loop through 'column.options'.
<select class="form-control cat1">
<option value="cat-all">All Topics</option>
{% set column = hubdb_table_column(5620116, "topic") %}
{% for topic in column.options %}
<option value="cat-{{ topic.name }}">{{ topic.label }}</option>
{% endfor %}
</select>
If this answer solved your question, please mark it as the solution.
It's blank because in the code there's nothing being outputted into the option. I was only giving an example of what you should be looping through so didn't provide the entirety of the code, since inside the option you'd basically be accessing the same data as before just more directly. (Also, if you're using the name of the column instead of the ID you need to put it in quotes)
<select class="form-control cat1">
{% set column = hubdb_table_column(5620116, "topic") %}
{% for topic in column %}
<option value="cat-{{ topic.name }}">{{ topic.label }}</option>
{% endfor %}
</select>
If this answer solved your question, please mark it as the solution.