Welcome back! In our last session, you successfully configured the API Connector and made your first live GET request to fetch data from an external movie database. You've built the connection; now it's time to bring that data to life inside your application.
This lesson focuses on the practical and rewarding step of displaying the API data you've fetched. We'll take the raw JSON response that Bubble now understands and render it on your page in a structured, user-friendly way. Mastering this will allow you to build the dynamic pages for your multi-tool platform, whether you're displaying a list of available tools or the results from a specific converter.
Displaying a List of Data with a Repeating Group
The most common way to display a list of items in Bubble—whether they come from your own database or an external API—is by using a Repeating Group. This element is designed to display a list of records, repeating a template cell for each item in the list.
Let's continue with the movie API from the last lesson and display all the movies you fetched.
Intro to APIs & the API Connector | Bubble Crash-Course
This video segment from Bubble's official crash course picks up exactly where our last lesson left off. It will guide you through adding a Repeating Group and connecting it to the Get All Movies API call you've already initialized.
Please watch the section from the beginning of the page setup. As you follow along in your own editor, focus on these key steps: Add a Repeating Group element to your page. In the property editor, set the Type of content. You'll see the API call response type you created, named something like Get All Movies response result. It's crucial to select the one that represents a list. Set the Data source. Here, you'll choose the option Get data from an external API and select the Demo Movie API - Get All Movies call. Add Text elements inside the first cell of the Repeating Group. For each text element, click "Insert dynamic data" and select Current cell's [API response name]'s [field]. For example, Current cell's Get All Movies response result's title.
Once you complete these steps and preview the page, you should see a list of movies, with each movie's data neatly organized in a cell. You have successfully bound an external data source to a visual element.
This process is fundamental. The written guide below reinforces these exact steps using a different API example. Seeing the same pattern in a different context will help solidify your understanding.
Tutorial: Build low code apps with Bubble and Hasura APIs
This tutorial from Hasura provides a clear, text-based walkthrough of connecting a Repeating Group to an API data source.
Read the section that begins with the UI setup. You will see the author perform the same actions you just did: adding a Repeating Group, choosing "Get data from an external API" for the data source, setting the "Type of content", and finally, adding a Text component to display the data from the "Current cell".
Displaying a Single Item's Details
Displaying a list is great, but what happens when a user clicks on one item? You'll want to navigate them to a new page showing detailed information about that specific item. For your project, this would be like clicking a tool in a category list and going to that tool's dedicated page.
Since the data lives outside your Bubble app, you can't simply "send the data" to the new page in the way you might with internal database records. Instead, we use a standard web practice: passing a unique identifier in the URL.
The following video demonstrates this entire workflow: creating a detail page, setting up the navigation, and fetching the specific item's data using its ID from the URL.
Intro to APIs & the API Connector | Bubble Crash-Course
This part of the video builds on the list you just created. It shows how to create a detail page for a single movie by passing its ID as a URL parameter.
Continue watching from where the new functionality is introduced. Pay close attention to this sequence: Workflow Setup: Create a workflow on the repeating group's cell that triggers a "Go to page..." action. Sending URL Parameters: In the workflow action, check the box to "Send more parameters to the page". You'll define a key (e.g., movie_id) and set its value to the Current cell's [API response name]'s id. This adds ?movie_id=123 to the end of the URL. Detail Page Setup: On the new page (e.g., "movie"), add a Group element. This group will act as a container for the single movie's data. Fetching Dynamic Data: Set the Group's Type of content and Data source to your single item API call (e.g., Get Movie by ID). Using the URL Parameter: In the Data source configuration, you will see the parameter field for the ID. Instead of a fixed value, use dynamic data: Get data from page URL. Set the parameter name to the key you defined earlier (movie_id) and ensure the type is text. Displaying the Data: Place text elements inside this group and bind them to the Parent group's [API response name]'s [field] (e.g., Parent group's Get Movie by ID's title).
This is a powerful and scalable pattern. You've now built a system where a single "template" page can display details for any movie, just by changing the ID in the URL. This is exactly the kind of structure you'll need for your multi-tool platform.
Alternative Method: The "Display list" Workflow Action
So far, you've set the data source directly on the Repeating Group, which makes it load when the page loads. There is another common method: using a workflow action to populate the group. This is useful when you want to fetch and display the data in response to an event, like a button click.
In this workflow, an API call runs as "Step 1", and then "Step 2" takes the Result of step 1 and explicitly tells Bubble to display that list of items in the specified Repeating Group.
Making the Data Interactive
Let's take this one step further. Many of the tools you want to build will require user input that changes the result. Think of a unit converter: the user selects "kilograms" from a dropdown, and the API call needs to know this to provide the correct conversion.
You can achieve this by making the API call's parameters dynamic.
How to use the Bubble API Connector - Bubble Tutorial
This tutorial from "Build Apps Without Code" provides a fantastic, concise demonstration of how to link user input elements directly to your API call parameters.
Watch the segment on using parameters. The key takeaways are: In the API Connector, add a Parameter to your call (e.g., key: type). Give it a default value, but make sure the "Private" checkbox is unchecked. This exposes the parameter in the editor. On your page, add an input element like a Dropdown. Populate it with the choices the API expects. In the Data source configuration for your Group or Repeating Group, you will now see the parameter field. Instead of a static value, click it and choose "Insert dynamic data". Select the dropdown element and its value (e.g., Dropdown Type's value). Now, when a user changes the dropdown's selection, Bubble will automatically re-run the API call with the new parameter and update the data displayed on the page.
This technique is the bridge between simply displaying static information and building truly interactive, API-powered tools.
Conclusion
In this lesson, you have learned the essential techniques for making external data visible and interactive within your Bubble application. You've moved beyond simply fetching data to creating a functional user interface for it.
Here are the key takeaways from today's session:
- Repeating Groups are used to display lists of data from an API. You configure this by setting the
Type of contentand usingGet data from an external APIas theData source. - To create a detail page for a single API item, you pass its unique ID as a URL parameter during navigation.
- On the detail page, you use a
Groupelement and theGet data from page URLexpression to dynamically fetch the correct item's data. - You can make your data displays interactive by exposing API parameters (unchecking "Private") and linking them to user input elements like dropdowns.
You now have a solid foundation for building the front-end of any API-driven feature. In our next lesson, we will address an important aspect of working with external services: implementing basic error handling for failed API calls. This will ensure your app remains stable and user-friendly, even when an API doesn't respond as expected.