Javascript To Bubble outputting multiple variables? How?

Hi there,

I’m starting to dig in to using the JavaScript to Bubble Toolbox plug in. I know a little bit about JavaScript and I’m having success passing variables INTO the J2B script, and I’m having success in retrieving an output from it to populate either a repeating group or a text element.

Question, some of my JavaScript functions will be producing numerous variables to output. How can I access more than one output from J2B properly?

Typically the proper way to set it up is to call the function at the bottom of the window with any values that are being passed OUT back to Bubble such as the following:

bubble_fn_functionTest(myVariable);

What if I have three variables that I want to access coming out of J2B such as myVar1, myVar2, myVar3? I may have three text elements that I want to populate with one of each for example.

What is the method for trying to access multiple values that live in my JavaScript function?

Thanks,
Dan

Perhaps answering my own question here, but I discovered that “Multiple values cannot be returned from a function in JavaScript but multiple values can be stored in an array or in an object and then the array or the object can be returned.”

Given this, if all of my values are numbers, then I can have a function that returns a list of numbers back to Bubble, and then I can can just reference them by position presumably.

If anyone has any other information feel free to chime in.

Thanks, Dan

3 Likes

Where you able to solve this as I’m struggling with the same thing?

You just drop another javascript to bubble element on the page and give it a different or unique reference in the bubble_fn_suffix field. then reference it the same as the first one in your JS. You may also reference this 2nd element in a WF (When JS_to_bubble_element event)

Does this make sense?

Thanks @jps1006, that makes sense. I’ll give that a try. But doesn’t that defies the point of having multiple outputs using 1 js element and using the “output1, output2” etc functionality?

I don’t know if I never noticed those outputs or if that was a feature added after I did the bulk of my use of the plugin, but I found this which might help:

More info here: https://toolboxdocs.netlify.app/

If you have other implementation questions let me know. I’m no expert but I’ve been able to do some pretty powerful things with this plugin.

Thanks :+1:t2::ok_hand:t2:

This is how I got it to work. Hope it help someone.

Element setup

Javascript

2 Likes

Will add that the setup of inputting and outputting data from JavaScript is explained in a video for anyone following the breadcrumb trail of this thread https://www.youtube.com/watch?v=Oie8GCEHQoE :+1:.

Bonus of this solution is you get tips on using AI to write the code for whatever you’re aiming to do with the JavaScript.