Forum Academy Marketplace Showcase Pricing Features

Insert Dynamic Data into HTML element

I’m receiving JSON array from an external API. I can use the Insert Dynamic Data to get the count of the number of entries in the array. With the count I want to loop through entries in the array.
var count = API Call:count;
for (var i = 0; i < count; i++){
var value =API Call:item #i’s field name;

Bubble won’t let me refer to the i element in the array. Any ideas how I can access the elements within the array?

Install the Toolbox plugin, create a javascriptToBubble element (i.e. a function), pass your variable into that function. Now that you have the object imported into Bubble, you can do what you will with it.

You might use regex to extract specific info, or just a JS script to extract desired objects/items:
const item_name = data.items[1].name;

Hitting up stackoverflow is always a good idea if you want to solve JS related questions.

Interesting idea, are you suggesting this?

The element receives values 0, 1, 2, … count; it publishes the value, which is then used in a dynamic expression to get the item.

I’d expect this to be unreliable, to skip some entries, because by the time the dynamic expression picks up the item, the value from the loop would have already moved on. Maybe it works though.

Another approach is to put custom javascript inside a List Item Expression, it would be called for each item in sequence.

Well put, javascript inside a List Item Expression is probably a safe bet. I haven’t yet tested that feature, so I can’t speak much on it.

That said, I’m not sure where @grehancl is running this script, but if he executed it as javascript inside a workflow and unchecked the asynchronous box…then set a conditional on the workflow (assuming the workflow is of the ‘when condition is true’ nature) for “only when i<100 and i>1”…the workflow would have to rerun continuously until the i=99. When i=99, he can run a conditional action inside the workflow to reset i to 0 (which would avoid re-initiating the workflow until the user needs to run it). When the script needs to be run again, set i=1. Basically, translating the for loop into ‘Bubble-style for loop’. I have a few of these setup in my app, and they work well…granted they are intended for ‘when user clicks this button too many times’, suspend them for 30 minutes’…not rapid parsing of JSON.

Yes that’d work, nice funky usage : ) You might appreciate javascript’s while loop, and also setTimeout.

Another option is for the javascript to call bubble_fn_wonderbra, have it trigger an event, and the workflow that runs can use its value, running more javascript if wanted.

So @grehancl you have lots of options. The best one is the one you understand the most.

Thanks guys. I’ll have a look at the options & see what works.

It is a pity that Bubble won’t let me refer to the i element in the array. With Bubble I can access the first element, the last element and a predefined element. If I could access the i element I wouldn’t have to pass data to another element in order to read it back

It can, but it needs to be able to see the value of i . In your example, the i is in javascript and not part of Bubble. So lots of this pokey jiggery is to get the value of i back into Bubble.

If you had i defined in a custom state number, or retrieved from a Bubble list or repeating group index, then you can refer to # item.

I’ve tried to use the the ListItem Expression but I can’t get it to work.

I’m reading data from an external Api, that returns a JSON array. As you can see from the image I have used value() to access the data. However when I print out the ListItem Expression it is empty string.

In the debugger when I inspect the ListItemExpression I can see that ‘Marzano - getRatings-Data’ does return data.

Any ideas how I can access the returned data?

@grehancl woops I didn’t test List Item Expression with list of API objects. At the moment it only supports plain lists and database lists.

Can you try one of the other methods?

I think one method we didn’t discuss was a workflow like:


  • Set a custom state “index” to number 1

Every 0.01 seconds
When index > 0 and index <= list:count and list:count > 0

  • do something with list:#index
  • set index to: index + 1

This topic was automatically closed after 70 days. New replies are no longer allowed.