HubDB dynamic rows generating

[VoytechMedia]

Hello,

I am wondering if it would be possible to generate items from my HubDB table after certain button being clicked.
To be more specific - I do not want to generate all the items rightaway and display/hide them w css class but dynamically generate them after button being clicked. This way my webpage is optimized.

I built a blog with categories once but all the thumbnails are generated immediately and being shown/hidden after filtering. I am looking for more optimal way to build such blog/resources page https://www.ziflow.com/blog

Another example is here https://www.toriihq.com/resources but again - elements are loaded just after DOM is loaded and I want them to load dynamically.

[Kevin-C]

 Hey @VoytechMedia 

Before looking at a JS solution my first thought would be to look into lazy loading or potentially just off loading all of the concern to the browser!

What I mean by that is that most modern browsers will actually lazy load an image if its parent container is hidden! So you can hide the content and this tells the browser "this is a non-blocking resource" and should be deprioritized in the critical rendering path.

This example shows that concept in action. 

Also see lazy loading on MDN.

Thoughts?

[VoytechMedia]

Thank you very much for response @Kevin-C 

I already implemented similar solution here https://www.ziflow.com/blog
Where we had about 150+ blog posts available but it is causing to render tremendously (in my opinion) long HTML code - even if content is lazy loaded. 
This page have 400 inbound links as the final outcome which apparently may cause its SEO being not optimal. 

Note from Hubspot while examining above page with Optimize tab:
"Page has less than 300 outbound links 

Too many outbound links creates a bad experience for your visitors and may cause search engines to view your page as low-quality or as spam. Your page has 401 links (including your navigation menus, for example). Aim for less than 300 outbound links."

I think your solution is great for pages with less content, what do you think? Or shouldn't I care that much about it?
Much thanks for helping me!! 🙂 

[dannio · Accepted solution]

 @VoytechMedia  you can use an ajax call to grab the hubdb rows via:
GET /cms/v3/hubdb/tables/{tableIdOrName}/rows
https://developers.hubspot.com/docs/api/cms/hubdb

This requires no authentication if the table is set to public. If it's not public, it will require a key, in which case you will need a serverless function to make the call as you will need to hide your authentication key

Once you get the data via the call, just append HTML to the parent container. something like:

html = "<div>" + data.columns['name'] + "</div>";
parent_container.insertAdjacentHTML('beforeend', html)

[VoytechMedia]

Thank you for response @dannio 
This looks like the way to go but my another question would be - Is it possible to parametrize these HubDB requests?
For example if I had table columns such as ID, Name and Category of item. I would like only grab items of "Tech" Category and Name containing f.e "ex" letters. 
I know I could filter all the JSON data once I request rows but more optimal would be adding parameters to request itself. 

EDIT: I see that adding queries is possible here https://developers.hubspot.com/docs/api/cms/hubdb#filtering-and-sorting-table-rows

So for example /cms/v3/hubdb/tables/{tableIdOrName}/rows?name__contains=ex&category__eq=Tech should make it work.

Additionally, is it possible to limit amount of requested rows for example to 10? From 5th to 15th

[dannio]

@VoytechMedia I see you found the answer already. Yes, it's basically the same as how you query when using hubl functions. Just add the query to the end of the request and it should work the same way.

[BarryGrennan]

You could do something with ajax and the HubDB api

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[Jaycee_Lewis]

Hi, @VoytechMedia 👋 Thanks for reaching out! Let's see if we can get the conversation going. Hey, @stefen @SJaeger @himanshurauthan @dannio, do you have any experience with projects like @VoytechMedia is describing?

Thank you! — Jaycee

[VoytechMedia]

Thank you!