Get data from external api, manipulate data, use in HTML element as array

Need help APIs
1

Hi All,

Hoping I can get some help with the following:

Use Case

I have data that I’m retrieving from an external API (formatted as an array of arrays and working fine). I would like to take some of this data and use it in an HTML element to display a Google Charts Gantt Chart (Google Charts Gantt Chart).

Method

Initially I tried to just use dynamic data in the HTML element, but i need to use a ‘for’ loop to efficiently bring in all the data and I’m unable to refer to the [i]'th number of a list when referring to data in bubble (when [i] is a javascript variable).

so instead of creating the array of arrays that Google Charts needs within the HTML element, my new approach is to try and create the array of arrays within bubble elsewhere, and just pass that single object into the google chart AddRows function.

So here is what I’ve tried:

  1. Save data from external api as a custom state in the page index (the page is named “project” in this case)
  2. Create a new type of thing called “Gantt Chart” that has all of the fields that the Google Charts Gantt Chart requires.
  3. Create a list of Gantt Chart’s as another custom state in the page index. This is called “Index List Gantt Chart”. This is the object I want to pass into the HTML element once it is populated.
  4. Create a custom state called Gantt Chart Index Number (this will function as [i] normally would). I set this value to 1 after the page has loaded.
  5. Create the following Workflows:

image

image
image502×755 27.7 KB

image

Now before I tried passing the resulting information into my HTML element, I thought I’d test it in a repeating group first and unfortunately it isn’t working.

I think my problem is that I’m trying to use a ‘data’ workflow action to change properties of fields in a list that does not yet have any data in it, rather than using some sort of “add item to list” function. Is such a function available when working with custom states?

@mishav you’ve been super helpful in the past I wonder if you could also assist with this one?

1 Like
2

I don’t have any experiences with Google Charts Gantt Chart and don’t know the arrays structure, but you can put entire objects (and arrays of objects) as json into html or javascript elements, where you convert string to objects by JSON.parse() function.

You can combine this with expression and list expression elements from @mishav’s Toolbox plugin to prepare such jsons from input data if needed.

3

I agree with @eftomi … as the destination is a HTML element, may as well pass the array of arrays directly to it. Could have an additional API call defined with the result as plain text, so Bubble doesn’t parse the result to separate fields. Then you can use javascript looping structures.

Sounds like a fun project!

I notice on your “do every 0.01 second” workflow, you have “make changes to a thing” … this is not a great setup, Bubble will visit the database each time, and the user will see the busy indicator for every loop.

UX will be better if the loops only affect page values. Of course, if its a “captive audience”, i.e. the user creating the chart doesn’t care about performance, then all good.

There isn’t, unfortunately, but you can replace the list …

Set a custom state, new value:
custom state's value :plus item

4

Thanks @mishav and @eftomi ,

So to clarify, if I can get my backend to spit out one long text string formatted as follows:

[‘Research’, ‘Find sources’, new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
[‘Write’, ‘Write paper’, null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, ‘Research,Outline’],
[‘Cite’, ‘Create bibliography’ ,null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, ‘Research’],
[‘Complete’, ‘Hand in paper’, null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, ‘Cite,Write’],
[‘Outline’, ‘Outline paper’, null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, ‘Research’]

and just bring that big line of text into bubble and reference it in the HTML element, that’s a viable path?

1 Like
5

I suggest step-by-step approach - you can prepare HTML element with this kind of sentence:

<source>
...
var myArray = copy & paste your long string, without quotes;
...
</source>

If the rest of js code works, you can then replace the above copy-pasted string with a reference to some other Bubble element’s output value (e.g. the result from your API call) with “Insert dynamic data”.

I mentioned JSON because it is more general than an array. And if you impute it as a string (you put quotes around the reference), you can use JSON.parse() to convert it into an object, thus double checking if everythig is OK.

Just try it out :slight_smile:

6

Hey - I’m wondering if you ever found a solution to this?

I did exactly this and it seems like the Google Charts Library doesn’t like this at all because it needs to know how many rows there will be to draw the chart.

I get a NaN number related to the drawing of the chart in the console.

Would really appreciate to know if you found a solution!

2 Likes