I'm having trouble processing data in Bubble.io with JavaScript! 🤯

maximilien.godeau.of · 2024-10-15T22:08:33.982Z

I’m having trouble processing data in Bubble.io with JavaScript!

I’m building a Bubble.io app and need to do a fairly complex calculation using a Poisson distribution. For efficiency, I have to execute it with Javascript (using the Toolbox).

My problem: I’m able to make the calculation and display the result in the console, but I’m stuck getting it into my Bubble.io app.

Here’s what I’m trying to do:

The result of my calculation is a 7x7 table (49 data points). Basically, it’s an array of arrays, or a list of objects.

I successfully display this table in the console with console.log (see screenshot).

But I can’t access the data from that table inside Bubble.io.

I’m thinking about creating an API system, but I’m not sure where to start.

My question: Has anyone encountered a similar problem? Do you have any suggestions on how to integrate this data into my Bubble.io app?

Any advice is greatly appreciated!

PS: If you need more information about my calculation or how I’m using the Toolbox, feel free to ask!

thumb_upthumb_down

adamhholmes · 2024-10-15T22:30:03.995Z

Yeah… this is one of Bubble’s biggest limitations…

Although you can work with Custom JavaScript in Bubble (in various ways, including the toolbox plugin), there’s literally no way you can access or use the output data (unless it’s primitive datatypes, or existing Bubble objects) in the Bubble editor…

Except, that is, by outputting that data as a JSON string, and then sending that string, via the API connector, to a backend workflow in your app, only to return it to the page where it was created, whereby it can then be parsed (thanks to the API Connector) into useable data (API data), that can then be accessed in the editor (ridiculous… yes).

So, you’re forced to incur WU cost, and use server bandwidth, just to access basic data (data that should be entirely client-side).

But… that’s just the way it is with Bubble.

So if you need to work with custom JS and non-Bubble objects, this is the way it has to be done.

(It’s actually not that bad… just a bit frustrating that it has to be this way, just to do super simple things like display some object data on a page).

tunacardak · 2024-10-15T22:50:52.282Z

I need to know more about the flow to suggest a solution, but did you try sending the output via Toolbox -> JavascripttoBubble?

chad5 · 2024-10-15T22:54:03.259Z

Get a sample of your json, put it manually in a blank api and initialise.

Put your code in a run js workflow and send it to your bubble to js element using bubble_fn_xxx

I output as text and then use a json to bubble things plugin to convert to the api thing you initialised

chad5 · 2024-10-15T22:55:31.504Z

You can also use the jsonata plugin to convert, with the added value of being able to modify the data using jsonata

georgecollier · 2024-10-15T22:55:50.478Z

chad5:

Get a sample of your json, put it manually in a blank api and initialise.

Yes, this is a very good hack that allows you to process JSON types entirely client side without making the API call. Still a pain in the ass but marginally better.

Essentially, you have a plugin element, stick the JSON in there, make the plugin element return your API (data) type, and then you can use it.

chad5 · 2024-10-15T22:56:47.181Z

I use jsonata do do some super conplex data manipulation before bulk creating thing using the bubble data api. Super powerful , I can create 100000 objects in the bubble db within seconds

chad5 · 2024-10-15T22:57:24.839Z

Are you saying you don’t need the json to bubble things converter?

adamhholmes · 2024-10-15T23:12:27.146Z

tunacardak:

I need to know more about the flow to suggest a solution, but did you try sending the output via Toolbox -> JavascripttoBubble?

You can only send primitive datatypes (text, numbers, dates, etc.) or Bubble datatypes (custom Datatypes, Option Sets, or Api data) to a Javascript to Bubble element.

There is no way in Bubble to work with non-Bubble objects (aside from doing everything completely in custom code… at which point, there’s little point in using Bubble at all).

maximilien.godeau.of · 2024-10-16T14:29:05.434Z

Thanks for your suggestions, I’ll be sure to look into them. I’ve been focusing on the API connector for now, and I’d like to be able to reproduce this schema:

image451×623 16.7 KB

I’m not sure if there’s a simpler way to do this or not, but I need to get the JSON data to use it and perform sums and averages from the results of my calculation.

If you have a specific process with an example, that would be amazing. Thanks in advance!

zelus_pudding · 2024-10-16T16:28:12.308Z

You’re going to need two things.

Initialize an API call in Bubble API Connector that loads the JSON object you’re trying to return to your client (your matrix / list of lists).
Create a custom Bubble plugin that returns that list of lists having set it’s return type to “App Type”

Tackling the first item is the easiest. Save your object which you’re already console.logging to a json file, upload that to your App (to get it available at a URL), and then initialize a Bubble API connector call to the URL of the json file you just uploaded. At this point you have an API call that knows the structure of the data you want to return.

The second aspect is a little trickier but is a solved problem in Bubble. In short, in the custom plugin you’re going to have made, you’ll have to massage your lists of lists to have the certain structure that Bubble expects “Bubble API call objects” to be in. Nice folks in the forum have previously created javascript to do this for you which you can find here. For discussion on the topic, see here.