Forum Academy Marketplace Showcase Pricing Features

Javascript To Bubble, (Error: Trying to send an Invalid Array to Bubble

Alright players. I’m having a pretty rough go of it here. One of our technical partners has this iFrame we’re supposed to use to retrieve some data once the user signs in to their service and hits a button. Luckily, nearly all of the javascript for that iFrame is already done. At the end of it, the iFrame returns an array. The array is logging to the console just fine, but for some reason Javascript to Bubble does not like it. Please see the screenshots below. Hopefully you all can see something I don’t.

This is the object I am trying to capture:

Object to capture

This is the HTML with the proper call to hit the JS to Bubble element:

This is the JS to Bubble element:

This is the workflow that fires when the above element is called:

Finally, this is the error:


@mishav you seem to know the absolute most about this stuff, so when you get a second could you please take a look at this?

A different approach would be to have a plugin make the request. Then you get full control. @jared.gibb

I considered that, but I was unable to get the plugin element builder to work for me. Using the exact same JS and html, I just kept getting an empty box.

I am able to get individual values if I do data.sites[0].providerId for example, but when I try to get the data.sites[0] array as a whole, I get that error. This is the confusing part. The values I need are definitely valid in Bubble and bubble eats them right up. Just when I try to get the whole list it seems to dislike something in the list and since the array is all text values I’m not sure why that is.

I am marking this as solved, but to be honest the solution isn’t really a solution moreso a workaround. I decided to just make 3 different JS to bubble elements and then run javascript for each one when the workflow for the first one fires. So I’ve got Provider Account ID, Account ID, and Provider ID JS to bubble elements. The javascript in the iframe calls all 3 of those to give them their values. Then I built the workflow for one of those elements, (doesn’t matter which one just make sure only one is set to run an action. In my case I chose the one that was first in the iframe javascript.) From there I was able to build the workflow to run the document get javascript you’ll find referenced in a few thereads around here. Here’s a sample in case you’re lost like me and not sure how to pass a value from iframe to bubble database:


I made three of these in the workflow:

There are a few caveats here for you fellow js to bubble noobs. Make sure each of your js to bubble elements has an ID attribute. That’s what you’re calling in the workflow’s Javascript. Without that, you’re not going anywhere.

Of course the end of the workflow is just make changes to thing, each field=js to bubble element a’s value for each js to bubble element. This kinda stuff is a huge PITA and it is more than likely the reason Bubble exists. It’s the better way to code! Although every now and then we have to go back into the woods.

Ideally, I would have been able to get this all in one shot, so I’m going to leave the thread open in case anyone else has a solution. I figured I’d at least do this writeup since the only thread I found that was kinda close to answering my questions before didn’t ever have a resolution and I hate that.

Hi! :wave:

The problem is that this is not an Array. This is a JSON object. If you want to send it to Bubble as an Array (list) I advise you to break the JSON lines and put them in an Array separated with commas. This will work. :+1:

Ah! I’ve got no clue on how to do that.