Remove duplicate entry from HubDB table

[shiyon]

Hi developers,

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.

Please check my code below:

    <div class="filter-cat row">
        <div class="col col-md-4 col-xs-6">
            <select class="form-control cat1">
                <option value="cat-all">All Topics</option>
                {% for item in module.webinar_content %}
                <option value="cat-{{ item.ondemand_row.columns.topic.name }}">{{ item.ondemand_row.columns.topic.name }}</option>
                {% endfor %}
            </select>
      </div>
    </div>
    <div class="row filter-cat-results">
        <div id="webinar-wrap">
        {% for item in module.webinar_content %}
          <div class="f-cat {{ item.ondemand_row.columns.topic.name }}" data-cat="cat-{{ item.ondemand_row.columns.topic.name }}">
            {{ item.ondemand_row.columns.name }}<br>
            {{ item.ondemand_row.columns.date }}<br>
            {{ item.ondemand_row.columns.description }}<br>
            {{ item.ondemand_row.columns.topic.name }}<br>            
        </div>
        {% endfor %}
        </div>
    </div>

Can you please help? Thanks in advance.

[amwilie · Accepted solution]

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>

[amwilie · Accepted solution]

It's inside the repeating group so you should be the using the name you defined in the for loop "item".

{{ item.cta }}

[amwilie · Accepted 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.

[shiyon]

Hi @amwilie 

The previous solution also worked. Now one more question.

In the 1st requirement, if we changed the <select> dropdown to multi-select, can you please show how to update the code?

Thanks

[amwilie · Accepted 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.

[shiyon]

Thank you @amwilie .

Is there any way to separate displayed topics using <span>s?

Thanks

[amwilie · Accepted solution]

You would have to use a for loop to add content around an item.

{% for category in item.ondemand_row.columns.topic|map("name") %}
   <span>{{ category }}</span>
{% endfor %}

[shiyon]

Thank you once again @amwilie.. The above solution also worked very well!

[shiyon]

Hi @amwilie,

One more question related to this.

I've added an additional choice element to the group but not inside the DB. Please check the screenshot.

But when I call it by it's name, it doesn't appear in the preview. Can you please check the below also?

        {% for item in module.webinar_content %}
        <div class="f-cat {{ item.ondemand_row.columns.topic.name }}" data-cat="cat-{{ item.ondemand_row.columns.topic.name }}" data-cat2="cat-{{ item.ondemand_row.columns.year.name }}">
            {{ item.ondemand_row.columns.topic.name }}<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 %}  

[amwilie · Accepted solution]

It's inside the repeating group so you should be the using the name you defined in the for loop "item".

{{ item.cta }}

[APrigent]

Hello @shiyon ! 

I am not a developer but I tag my colleague who may be able to help! @MBERARD 

[amwilie]

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 %}

[shiyon]

Thank you @amwilie for the quick reply.

Let me add more details.

1) module.webinar_content  is a group in the custom module inside which the table is called.

2) Name and ID of the table are ondemand_2023 and 5620116 respectively.

3) Name of the column is 'Topic'.

I copy-pasted the above code and replaced it with those values as shown below. But I couldn't see the list.

            <select class="form-control cat1">
            {% set column = hubdb_table_column(5620116, topic) %}
            {% for topic in column %}
             <option></option>
            {% endfor %}
          </select>

When I put topic inside single quotes, a blank <option> appeared. Is there any further change needed inside the code?

Thank you

[amwilie · Accepted solution]

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>

[shiyon]

Thank you @amwilie for the solution. This was the answer I needed.

The mistake I did was that I used text field to add topics instead of select box.

[amwilie]

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>