Printing multiple options from a multi-select column (HubDB Table)

[BenMarkBarton]

I'm currently building a Custom Module linked to a HubDB table, and I want to be able to display multiple options from a multi-select field column in my table. I've managed to get it to print the items, which works fine if the row only has a single option in that multi-select field, but for rows that have multiple options, it prints multiple instances rather than a single sequential instance. Hopefully the code snippet and screenshot of the output will make sense.

{% for row in table %}
<div class="team-member-card-container {{ widget.cards_in_row }}">
    <div class="serviceBox">
        <div class="serviceBox-img">
            <img src="{{ row.image.url }}">
        </div>
        <div class="team-member-info">
            <h3>{{ row.name }}</h3>
          <h5>Language(s): {{ row.language }}</h5>
          {% for item in row.expertise %}
          <h6>Expertise: {{ item.name }}</h6>
          {% endfor %}
            <p>{{ row.bio_text }}</p>
       </div>
      <div class="caas_button"><a href="{{ row.form_url }}">{{ widget.button_text }}</a></div>
    </div>
</div>
{% endfor %}
{% endif %}

As you'll see in the screenshot here, the relevant code relates to the For statement and h6 tags for expertise, but if there's a solution, it would also be applied to the language section as well.

Ideally, I want the fields to be able to print sequentially, separated by commas - if that's not possible to automate in this way with code, I know I can change the column in the table to text and manually input the selections that way (with a relevant tweak to the css) but wanted to see if it's possible this way first.

[BenMarkBarton]

Thanks for this Kevin! I had a go at your suggested solution, and couldn't quite get it to work. By using the row.expertise language, my output was a string of attributes for the multi-select field rather than the actual printed output I was getting from the For loop. 

So instead I went with your first solution, embedding the For loop inside the h6 tags, and then separating each item with a | rather than a comma and space, which has worked out as a nice and elegant solution. 

Thank you so much for your help!

[KOrdener · Accepted solution]

Hi @BenMarkBarton, You can definitely accomplish what you are asking and frankly you were very close to having it correct. The problem right now with what you have is that the 

<h6>Expertise: {{ item.name }}</h6>

is inside the for loop which duplicates the entire <h6> tag for each iteration of the loop. What you are needing to accomplish however, is putting the output of the for loop inside the <h6> tags as a whole. Now, technically you could solve this by very simply reversing the order: 

<h6>Expertise: {% for item in row.expertise %}{{ item.name }}, {% endfor %}</h6>

However, doing this is a bit messy when reading and it leaves a random comma and space at the end of the list.

The best way to do this would be to remove the for loop around the <h6> tags altogether and use the join filter on the array that you were looping through. Using that would look something like: 

<h5>Language(s): {{ row.language|join(', ') }}</h5>
<h6>Expertise: {{ row.expertise|join(', ') }}</h6>

What this is doing is taking all the values inside the array of items and joining them together with whatever values you put inside the parenthesis and quote marks. In this case it will add a comma and a space between them giving you a sequential list just like you want. I hope this helps you!