Fetching Data Through Hubdb

[Woodsy]

I have created a module that allows the creator to select a row from a Hubdb using a HubDB row field.

I can then fetch the data from the HubDB row using the Landing Page Tile.

I have set a column (overview_items) in the first HubDB that calls data from another HubDB using Foreign ID and selecting the second HubDB and which column. This allows me to select which rows from the second HubDB to include. This is the second HubDB:

I have set the column fetch up in the module field :

Is this the correct way to write the code:

{% for item in module.lp_select.columns.overview_items %}     
        <h3 class="card__title">
           {{item.name}}
          </h3>
{% endfor %}

If the above code fetches the rows from the name column in the second HubDB and displays them:

is there a way to also fetch the other columns from the same row from the second HubDB? I would like to show the icon above the <h3> and the pic text under the <h3>.

For example with the screens shots above the first HubDB is calling the following rows from the second HubDB:

• Custom builds rarely stay “custom”
• Hidden costs outweigh savings
• Speed is ROI
• Operational complexity compounds
• Buying gives you more than software

Each of these rows also have items in the icon column and pic column.

Is there a way to be able to have these 2 columns fetched by the first HubDB if the name column item is fetched via the first HubDB?


How would I write this code:

{% for item in module.lp_select.columns.overview_items %}            
          <div>
            {{item.icon}}
          </div>
          <h3 class="card__title">
           {{item.name}}
          </h3>
          <h4>
            {{item.pic}}
          </h4>
{% endfor %}    

Thanks

[Indra]

@Woodsy,

In order to fetch the foreign ID data, you have to use the hubdb_table_row() function.

I have setup an example code for you:

{# --------------------------------------------- #}
{# Get metadata from the module field selection #}
{# --------------------------------------------- #}

{# 'module.landingpage.columns' contains metadata about the columns in the selected HubDB table.
   Here we store it in a variable so we can reference it later if needed. #}
{% set column = module.landingpage.columns %}

{# Extract the 'name' property from the column metadata (optional). #}
{% set title = column.name %}


{# --------------------------------------------------------- #}
{# 1) Retrieve the selected landing page row from the HubDB. #}
{# --------------------------------------------------------- #}

{# 'hubdb_table_row' fetches a single row from a specific table.
   The table ID and row ID come from the module field where the content editor
   selected a row from the "Landingpage" HubDB table. #}
{% set lp = hubdb_table_row(module.landingpage.table_id, module.landingpage.id) %}


{# ------------------------------------------------------- #}
{# 2) Access related records via the foreign ID relationship #}
{# ------------------------------------------------------- #}

{# In the "Landingpage" HubDB, there’s a foreign ID column called 'overview'.
   This links to one or more rows in the "Landingpage Overview" HubDB.
   HubDB automatically expands that relationship into an array of full row objects. #}

{# Display the title if it exists #}
{% if title %}<h2>{{ title }}</h2>{% endif %}

{% if lp.overview %}
  <ul class="overview-list">
    {# Loop through each related row from the foreign table. #}
    {% for foreignTable in lp.overview %}
      <li>
        {# 'hs_id' and 'name' are standard HubDB row properties. #}
        {{ foreignTable.hs_id }} — {{ foreignTable.name }}

        {# Example of accessing custom columns from the overview table:
           - {{ foreignTable.title }}
           - {{ foreignTable.subtitle }}
           - {{ foreignTable.url }}
           - {{ foreignTable.image.url }} #}
      </li>
    {% endfor %}
  </ul>
{% endif %}

{# ------------------------------------------------------------- #}
{# Notes:
   - If the 'overview' column allows multiple selections, HubDB returns a list (iterable).
   - If it’s single-select, HubSpot will still return an object, so you can check
     if it’s iterable before looping.
   - This structure allows you to display any data stored in the related table,
     creating a one-to-many or one-to-one relationship. #}

Hope this helps you getting to understand the foreignID field.

[Woodsy]

Thank you Indra for your guidance. I have been trying to work this into my project but can't get the data to pull through into a list.

The parent table name is <landing_pages>  and the column with the foreignID field is called <overview_items> which is a multi select cell that contains items from the foreignID column <name>

The table name that the foreignID points to is called <landing_page_overviews>

The data that I want to pull in from landing_page_overviews is in columns <name>(text field), <icon>(image field)  and <pic>(text field)

CONTENT CREATOR VIEW

The content creator can select a parent table name using a module dropdown select that is driven by a HubDB row field <lp_select>. This points to the parent table <landing_page_title> column. I have selected <overview_items> as the column to fetch

I have got the front end select working using:

{% for item in module.lp_select.columns.overview_items %}     
        <div class="card__details overview">
          <h3 class="card__title">
           {{item.name}}
          </h3>
        </div>
{% endfor %} 

The user selects the parent table <landing_page_title> and the items in the <overview_items> column cell for that row are returned. The items are displayed as a series of cards with the returned text as h3's.

Would you be able to adjust the code you share to show how it would work within my scenario? This will help me understand the structure so that I can build on it as I would like to include more functionality. Being able to see how this works would be a great help.

Thank you in advance for you help and guidance.