Weird Hubl/HubDB loop issue

[tmcmillan99]

I created a custom gallery module that pullls data from a HubDB table. Everything appears to be working as it should based on my logic but for some reason the last set of data is not rendering on the page.

Could I have something in my hubl syntax that’s not quite right?

Code below along with some screenshots-

{% set db = module.hubdb %}
...
 {% set grad_id = module.grd_id %}
 {% set grades = hubdb_table_column(db, grad_id) %}
 {% for item in grades.options %}
 <div class="grades w-full" x-show.transition.duration.1000ms="['{{ item.name }}', 'all'].includes(grd)">
 <div class="grade-item pt-16">
 <h3 style="color: #009CA6;">
 {{ item.label }} 
 </h3>
 </div> 
 {% set grd_match = item.name %}
 {% set groups = [] %}
 {% for row in hubdb_table_rows(db, 'grade=' + grd_match ) %}
 {% do groups.append(row.cat.name) %}
 {% endfor %}
 {% for group in groups|unique %}
 <div class="category pt-16 pb-4" x-show.transition.duration.1000ms="['{{ group }}', 'all'].includes(cat)">
 <h4 class="capitalize">
 {{ group }} 
 </h4>
 {% set match = group %}
 {% set imgs = hubdb_table_rows(db, 'cat=' + match ) %}
 <div class="img-gallery grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
 {% for img in imgs %}
 <div class="img-item w-full" x-data="{ModalIsOpen: false}">
 <div class="thumb-img aspect-square rounded-md overflow-hidden cursor-pointer" @click="ModalIsOpen = true">
 <img src="{{ img.swatch.url }}" alt="{{ group + '-' + img.title }}" class="w-full h-full object-cover">
 </div>
 <div class="thumb-img-title text-center p-4">
 <p>
 {{ img.title }}
 </p>
 </div>

Last set of data from HubDB-

Results on page-

One thing I discovered in troubleshooting is that if I change the grade option on one of the Tangram entries from Grade 3 to Grade 2, all 6 entries will show on the page but then the Stitch section above them disappears. As mentioned above, could this by a hubl issue with how I have it designed out?

It took me a little while to figure out how to get the “for loops” working correctly due to needing 2 filters (using Alpinejs).

The page is published in Staging so I think it’s available publically. The Tangram category is at the bottom of the page.

https://www-artcobell-com.sandbox.hs-sites.com/en-us/textile-grades

Any suggestions on what I need to look at would be greatly appreciated.

Thanks,

Terry McMillan

[Jaycee_Lewis]

Hey, @tmcmillan99 Thanks for including your code and the link. Let’s invite some of our HubL experts to the conversation — hey @albertsg @Stephanie-OG @alyssamwilie do you have any suggestions or troubleshooting tips for @tmcmillan99?

Thank you very much for taking a look! — Jaycee

[tmcmillan99]

Interesting update from some troubleshooting…

I add the following code to the module just to make sure I could pull the data from HubDB for the “tangram” category.

{% set test = hubdb_table_rows(db, 'cat=tangram' ) %}
{{ test|pprint }}

When I view the page, it renders all 6 images from the tangram category and correctly prints the data from HubDB. However, the images for the “stitch” category above it, disappear. That does not make sense to me. I don’t understand why adding that bit of code would affect the other category or render the images for the missing category. I would expect it to only print the queried data without affecting the rest of the code.

[maciekr]

Hi! I wanted to jump in on this topic because we’re experiencing a similar issue. Specifically, we’ve noticed that not only the last element in the loop isn’t displaying, but potentially others as well.

In our version, this works directly with a field, and we’re not using HubDB. When I fetch the data statically using content_by_id, everything displays correctly. However, when it’s supposed to work automatically, we encounter this issue.

Below, I’m attaching the code to confirm its correctness. Please fix this as soon as possible, as the issue is occurring on a client’s website.

{% for item in module.products %}
 {% set product = content_by_id(item.product) %}

 <div class="swiper-slide">
 <a class="product-bestsellers__product" href="{{ product.absolute_url }}">
 <div class="product-bestsellers__image">
 <img src="{{ resize_image_url( product.featured_image, 0, 0, 480) }}" alt="product image" loading="lazy">
 </div>
 <h3>{{ item.title }}</h3>
 <p class="button {% if item.button_text|length == 0 %}button--arrow{% endif %}">{{ item.button_text }}</p>
 </a>
 </div>
 {% endfor %}