JSON Data in Bubble Repeating Group

Need help
1

video explanation : 2025-04-29 16-02-50.mkv - Google Drive

Hello everyone,

I need some help with integrating JASON data into my Bubble app as a data source. Here’s the flow I’m working with:

Getting Data from Google API:

I first retrieve the calendar event data from the Google Calendar API. This data is returned in JSON format and contains various event details such as the event summary, start time, end time, and other related information.

Modifying the Data with JavaScript:

Once I have the raw event data, I’m using JavaScript to manipulate or modify the data as per my needs. For example, I may want to:

Change the format of the date and time.

Filter out certain events.

Extract only specific fields like event summary and links.

The modified data will be in a similar structure to the original Google Calendar events, but with adjustments based on my requirements.

Using the Modified Data in Bubble:

After modifying the event data in JavaScript, I want to use this data as the source in Bubble for a Repeating Group. Specifically:

The modified event data should be displayed in the Repeating Group.

Each event will be shown with its details such as summary, start time, and event link.

Challenges:

I’m not sure how to send this modified data from JavaScript into Bubble.

How can I use this data within the Repeating Group without directly fetching it from an API each time?

What’s the best approach to store and display this modified data in Bubble’s database or use it dynamically?

Key Question:

How do I pass this modified Google Calendar event data (post-JavaScript manipulation) into a Bubble Repeating Group as a data source? Should I store it in Bubble’s database or use it dynamically within the page?

Any insights or recommendations on how to best approach this would be highly appreciated.

Thank you so much!

2

I guess you are not vey familiar with Bubble and API Connector? Did you know that Bubble is mostly a no-code platform?

Can all be done with Bubble native functions. Be sure to set the type of date field to date when you initialize your API call in API connector, and you will be able to use :formatted as to show the date in the format you want.

In API Connector, when you initialize a call, you can choose to ignore fields that you don’t want (using “ignore” in the dropdown).

You want to filter some events, use :filtered on your list.

There’s absolutely NO reason according to your post to manipulate the result of the API Connector in JS.

In RG, select the API Call name list as data source and use Get data from API:filtered to show relevent events. Inside the RG cell, this is where you will be able to show the date and use :formatted as…

3

Hey, I truly appreciate your response thank you for taking the time to explain it so clearly. That approach definitely works for many use cases and it’s great how much Bubble can handle natively.

That said, the specific feature I’m working on involves a bit more complexity beyond standard filtering and formatting, which is why I’m exploring custom manipulation before integrating with Bubble. I’d really appreciate the chance to hop on a quick call so you can see the full context and flow once you see the setup, I think it’ll make a lot more sense why I’m approaching it this way.

Let me know if you’re open to that and we can find a time that works!

4

This topic was automatically closed after 70 days. New replies are no longer allowed.