Map List Object to an Array | A Firebase Realtime Database API to Bubble Guide

Some Context:
One of my client start a migration of his database from Bubble to Firebase Realtime Database (RTDB). So at some point I have to use the RTDB API to call some jobs and display it in the bubble app.

Surprise(!) :
I just finished to setup my API call from the API connector on the /jobs.json of RTDB. And here is the response:

What happens:
RTDB is a noSQL database that stores data as JSON objects. And when you call the API for example on the /jobs folder, it gives you all the object and field one by one, like in the screenshot above. And you CAN NOT USE IT in Bubble with this JSON structure.
You rather need an array with a list of objects. So you can use it in a repeating group for example. And I search for days for an answer on this forum… But I didnt find anything :confused:

So here is a quick solution I made to map your Firebase-like result into a JSON bubble friendly. I’m sure there are many ways to get around this problem. Feel free to share your own solutions.

One Solution:

  • Capture header in your RTDB API call: for some reason I ignore… I was not able to call the raw body text without checking this and nesting the response into a body field.
  • Use the free and super-known Toolbox Plugin: we will use the “server script” action from this plugin, so you can manipulate data in both frontend and backend workflows.
  • Create a backend workflow to parse the unusable JSON. Expose as public API workflow (without authentification if you don’t need it) and add the server script action
  • Setup the server script action: use the Node.js script below, place the json dynamically in the data input and choose text as return type. DO NOT check returns as list.
const inputJson = JSON.parse(data);

const objectList = Object.keys(inputJson).map(key => {
    return {
        ...inputJson[key]
    };
});

return JSON.stringify(objectList);
  • add an action Return Data from API: use the plain text type and call the Result of Step 1’s result
  • In the API connector call your backend workflow with this setup:

You now have an API call to parse RTDB JSON that gives you a list of object. Just use both API calls in a row to use the objects in your Bubble app.

Hope this will help people like in my case :slight_smile:
@+

1 Like