Transforming 3rd party data and displaying it on Bubble

Hey there, fellow app builders! In this step-by-step guide, we'll embark on an intergalactic journey to showcase how Xano can transform data from a third-party API and display it seamlessly in your Bubble app. Buckle up, and let's dive into the world of Star Wars!

Setting Up the API Endpoint

First things first, let's create an API endpoint in Xano. Click on "Add API Endpoint" and select "Start from Scratch." We'll call this endpoint "Star Wars Planets" – because who doesn't love exploring the diverse worlds of the Star Wars galaxy?

Once inside the API endpoint, navigate to the function stack and add an "External API Request" function. This nifty feature allows you to enter the URL of an external API endpoint directly into Xano.

For our Star Wars adventure, we'll be using the Star Wars API. Specifically, we'll be working with the endpoint that retrieves data about different planets: `https://swapi.dev/api/planets/`. Copy this URL and paste it into the "URL" parameter field in Xano, then hit save.

Run the API endpoint, and you'll see the full response from the Star Wars API, including a list of planets. But wait, there's more!

Transforming the Data

Let's say you only want to work with the planet data, without all the extra fluff. No problem! Hit the "Copy Result as JSON" button to copy the response to your clipboard.

Next, create a variable called "results" by going to "Data Manipulation" and selecting "Create Variable." Set the value of this variable to the result from the "External API Request" function.

Now, add a "Subpath" filter to the "results" variable. This will allow you to visually drill down and select only the data you need. In this case, navigate to `response > results > results` to get the list of planet objects.

With the planet data at your fingertips, it's time to transform it! Let's start by converting the planet diameters from kilometers to miles.

Add a "For Each" loop to iterate through the list of planets. Within the loop, update the "diameter" property of each planet object by multiplying it by 0.621371 (the conversion factor from kilometers to miles). Then, round the result to two decimal places using the "Round" filter.

While you're at it, why not transform the "orbital_period" property too? Update this property by dividing it by 365 (the number of days in a Earth year) to get the orbital period in Earth years. Round the result to two decimal places as well.

After hitting save and running the API endpoint, you should see the transformed data with diameters in miles and orbital periods in Earth years.

Displaying the Data in Bubble

Now that you've successfully transformed the Star Wars planet data, it's time to display it in your Bubble app. Bubble has a handy plugin called "API Connector" that allows you to connect to third-party APIs like Xano.

In Bubble, add a new API by clicking "Add New API" and naming it "Star Wars." Expand the API call and paste the Xano API endpoint URL (found by clicking the "Endpoint URL" in Xano) into the appropriate field. Initialize the call, and you should see the transformed planet data in Bubble.

To display the data, create a new blank page in Bubble and add a "Repeating Group" element. Set the content type to "API Call" and select the "Star Wars" API you just created.

Within the repeating group, add text boxes and insert dynamic data from the "Current Sales API Call." Display the planet name, diameter (in miles), and orbital period (in Earth years) for each planet.

Preview the page in Bubble, and voilà! You should see a list of Star Wars planets with their transformed data, ready to impress even the most discerning Jedi Master.

May the Force (of No-Code) Be With You

Congratulations! You've just learned how to integrate third-party APIs with Xano, transform the data to suit your needs, and display it in your Bubble app. This powerful combination of no-code tools will undoubtedly help you build amazing applications faster than ever before.

Remember, the journey doesn't end here. Keep exploring, keep learning, and keep building! Who knows, you might even discover a new planet or two along the way. May the Force (of no-code) be with you!