Loading a continuous movie list via API to a repeating group

Hello, new here to repeating groups and API’s.
I’m trying to create a repeating group that will grab an entire list/multiple pages of horror movie posters inside a repeating group. I’m able to call successfully to the API, but it’s only giving me one page of posters. I’m calling ‘themoviedb.org’ and according to their api data they have 44,286 pages of posters.
So basically what I’m trying to achieve is when you load the page you’ll have a repeating group that you can scroll through all of the posters. Hopefully there is a simple way of achieving this. Thanks for your help

You probably need to reference the page and totalPages properties in the response, and then when applicable include the page query parameter in another request to retrieve the next page of results. You could trigger that using a “next” button on your repeating group.

This may require some tweaking but hopefully this helps :blush: Bubble | No-code apps editor: scrolling-api-request | Bubble Editor

Uses a plugin to get the scroll position of a RG, then when its less than 150 pixels left it does the API call again and adds it to the existing list

I had to go to app settings → General → last option at the bottom to enable HTML tags, so you can assign an ID on the RG and put it in the plugin element (so it can monitor the position)

I will give this a shot… thank you!

@tylerboodman
In your example. Do you mind telling me what you picked in the ‘Custom Event’ path? I’m a little stumped with how you’re pulling the movies. I would assume it’s with the plug-in option but I don’t get an API option on my end.

You don’t have to do the custom event, I just did it so I could trigger the same workflow twice, once from page load, and again when the RG gets towards the end of the list (with a specific page)

You’ll need the API Connector with the API call set up. Set it to Action not Data so its an action in our workflow

Does tat make sense?

Sorry, I’m very new to this. So, I see how you’ve set the pixel workflow up and stated you used the custom event to show an example. How do I go about setting the Api up to call multiple pages? In your example I had a bit of trouble understanding the ‘(param.) page’ action and this is on me not being familiar with everything. Do you mind showing me that aspect in more detail and how it plays into your pixel idea. Again, I apologize for not fully understanding.

I removed the custom event just to make it more straight forward (and upgraded the layout cause I was bored)

Page is loaded
Step 1 makes API call to TMDB and asks for page #1 → Step 2 sets a custom state so we know we are on page 1 currently, also sets a custom state list to the results we got from the API call

Now when the scroll detector triggers
Step 1 makes API call to TMDB and asks for the page we are current on +1 → Step 2 sets the new page # custom state, and takes the current result list and merges the new results after it.

This “(param.) page”
image

is just the page parameters I added in the API Connector, per TMDB docs you can ask it what page you want to request specifically with that parameter

Then the RG’s data source is the custom state “results” (the one we are continuously adding more to)

And inside the cell we just point to the Cell’s movie title, and per their docs their movie posters have a base URL https://image.tmdb.org/t/p/w500 then you add on the Current cell's poster_path to get the full image URL

@tylerboodman
Not sure what’s going on, but I typed in everything in your example and it’s still giving me one page. Would you mind looking at it to see if you see any obvious errors?
my page

It’s under ‘movie_all_page_2’

Thank you again. Sorry this thing is being a pain

1 Like

Change in the app settings to View only, right now won’t let me see it, and no worries :blush:

@tylerboodman

I apologize, I thought I did that. It’s fixed, you are clear to view

I have an api set up for horror movies
Which is what I ultimately want to call, but I currently have popular movies “your example” called to see if my api info from the horror genres was screwing up.

Again I appreciate you helping

This expression evaluates to a yes/no depending on if the page is 1 or not.

So instead of giving the API a number you’re giving it a yes/no (or true/false)

Just need to change it to RepeatingGroup POP's page + 1 :blush:

@tylerboodman
I changed it and it’s still not working :weary:
Not sure what’s going on
Do you think it’s something w themoviedb’s API page?

The Scrollactions A element isn’t working (notice none of the values are updating like scroll position) most likely because it needs to be visible on page load

1 Like

@tylerboodman

That was it!!! You’re a genius!! Thank you very much!
I appreciate you putting up with my cluelessness. Seriously, thank you

1 Like

@tylerboodman
Hey Tyler one more thing.
I’ve created a floating group with text
‘Popular’ and ‘alphabetical’
I’m able to achieve the result in my workflow but just with results of one page of the movie call ( it will scroll through a bunch of pages but only the first page responds to the popular or alphabetical).
Would you know how to connect your solution to the workflow of these texts so all pages are alphabetical or all pages are from most popular to least
Thanks again!

Sounds like whether the user picks “Popular” or “Alphabetical” you need to toggle different repeating groups being visible. Most likely alphabetical will be a different API call you have to setup, then you would duplicate the page-loading logic for that one too. Just cause I didn’t see any sorting options in the API docs, unless they let you do one common API call and sort it based off of popularity without specifically calling the /popular endpoint specifically like we’ve been using.

How are you getting alphabetical right now?

Oh just found this: Movie

It says the popular endpoint we’ve been using is really just that endpoint behind the scenes but with it sorted by popularity. I recommend using that one instead and just dynamically adjust the sort parameter.

You will need some logic so if the user changes the sort type it clears that custom state list and starts over.

Alphabetical is ‘sorted by title’

1.So how would I coding the logic to get multiple pages if I wanted to use the same repeating group? Or is that not an option and I have to go with another repeating group.
2.Also, would that truly alphabetize everything, or would it try to alphabetize the movies once the page is loaded which would look weird?