Displaying list from API call onto Bubble Element

[howardw0620]

I’m calling an external API through API Connector that returns an object in the format of:

{
. layers: [
. . [Layer1, 0, 3],
. . [Layer2, 1, 4],
. . …
. ]
}

Is it possible to grab each the list from layers and display it in a row?
I was looking at the RG element and it seems like it can only have predefined Row values whereas I’m looking for a dynamic Row value.

I was hoping to dynamically creating an element (maybe RG?) after the API call and have it look something like this:

------------------------------
| Layer_1  | Val: 0 | Val: 3 |
| Layer_2  | Val: 1 | Val: 4 |
------------------------------

[Jici]

Yes you can
RG will let you choose the type of the API Call list

[howardw0620]

I’m pressing a button that sends params to my external API and it returns values dynamically based on the parameters. ALL the fields in the return object are static, EXCEPT the amount of layers in the Layers field. On some API calls, I may receive 3 layers, on another one I may receive 9, etc. The structure of an example output from the API looks like.

{
. StaticValue1: 0,
. Layers: [
. . [Layer1, 0, 3],
. . [Layer2, 1, 4],
. . [Layer3, 4, 6],
. . …!!!
. ],
. StaticValue 2: 0,
}

I have so many questions right now and Bubble’s functionality seems so limited it’s driving me crazy. From what I understand, I can only statically set RG’s row’s and columns. I want to be able to pull this data from my external API and set an element to nicely display all the layer’s data accordingly:

--------------------------------------
| StaticValue 1: 0                   |
--------------------------------------
| StaticValue 2: 0                   |
--------------------------------------
| Layer1  | Val: 0 | Val: 3          |
--------------------------------------
| Layer2  | Val: 1 | Val: 4          |
--------------------------------------
| Layer3  | Val: 4 | Val: 6          |
--------------------------------------

I’ve already tried making a thing of things, using my entire API output data into a new thing typed
‘API-Object’ with the structure:

'API-Object'
StaticValue1: number,
StaticValue2: number,
LayerList: (don't even know how to transform API output into list 
not to mention I have to somehow build a list of Layer-Object types)

I also have another thing type ‘Layer-Object’ meant to hold each layer object and it contains

'Layer-Object'
Val1: number,
Val2: number

This is the step I’m currently stuck on:

Can you tell me how I can create an RG element because I can’t for the life of me figure it out.

[Jici]

You don’t have to create a thing. What is the API you are calling?
It will be easier to explain how to set thing

[howardw0620]

I’m using the ‘get Data from external API’ feature. I have my API hooked up using the API connector plugin. It returns an object in the state that I described above.

[Jici]

Yes that’s fine.
You need to set it to “Data” as type.
And you can select the Type of RG to be set on your API Call name Layer probably

But which API are you calling?

[howardw0620]

@Jici

And you can select the Type of RG to be set on your API Call name Layer probably

You mean create a type ‘Data’? Because I don’t see it here.
The API name is DXF API. The output key/field names aren’t the same as the layer return API object i mentioned earlier but it’s the exact same structure.

[Jici]

No I don’t mean create a type, but set the API call to “Use as” “Data” (by default, this is data)
Do you have link to API Doc?
Did you set the data type to JSON in the api connector? If yes, can you initialize call and take a screenshot of the result? (The screen right after the call is initialized)

[howardw0620]

@Jici

Did you set the data type to JSON in the api connector? If yes, can you initialize call and take a screenshot of the result? (The screen right after the call is initialized)

Thanks for the help so far Jici.
It’s just a single API that takes 2 parameters and outputs the JSON object I typed earlier. Every call returns an object in that format with the exception of the layers field being dynamic (can have n amount of lists for every call). But every list in layers will have exactly length 5. I’ve set the “Use as” to data and I’m not sure how I should approach this next. I’m not really sure what you mean by “And you can select the Type of RG to be set on your API Call name Layer probably”.

[Jici]

Once you have initialized the API call as data, you will see all apinlist available to select as data source option. You need to select the layer list for type and use Get Data from API on data source

[howardw0620]

Ok, I’ve reinitialized the call but I don’t see data source as an option.
Here’s what I’m seeing

The layers field is automatically set to a list of type DXF API layer

[Jici]

I mean in your Repeating group you will set data source to the api call

[howardw0620]

Thank you so much! That fixed the issue with the dynamic load of all layer lists!
But right now, because it’s just a list/array value for each layer, nothing is being outputted. Any thoughts on how I can split up the values in the array and display the text accordingly.

The debugger gives me these values right now:

And my RG looks like:

Is it possible to achieve this with my RG?

------------------------------------------------------------------------------------
| 0            | Val1: 16777215  | Val2: 7  | Val3: 0     | Val4: 0       |
------------------------------------------------------------------------------------
| DXF test$green | Val1: 65280     | Val2: 3  | Val3: 4.051  | Val4: 1.026   |
------------------------------------------------------------------------------------
| DXF test$blue  | Val1: 255      | Val2: 5  | Val3: 4.663  | Val4: 1.73    |
------------------------------------------------------------------------------------
| DXF test      | Val1: 4980736   | Val2: 18 | Val3: 141.805 | Val4: 167.793 |
------------------------------------------------------------------------------------
| DXF test$red   | Val1: 16711680  | Val2: 1  | Val3: 22.724  | Val4: 0      |
------------------------------------------------------------------------------------

[Jici]

This seem to be a little bit more complex. you will need to “split” value using regex with the , and use the index (item #) to get the result of each column
This topic will help you to understand:

Multiline Input into List of Texts?

I have a simple multi-line input field where the user inputs a word(s) on separate lines. Let’s call it nicknames. So the user inputs their nicknames into the multi-line input as such: nickname1 nickname2 nickname3 Now, when I save it, I need to save it into the user’s ‘nickname’ field which is a List of Texts. In the Workflow I’ve tried setting the ‘nickname’ field using the Set List, Add List, and Add methods and I cannot get the list field to populate. I’ve tried using a SPACE/COMMA/SPACE…

And this exemple with an input

Bubble Editor - Sandboxjc

[howardw0620]

Ok, I actually went and simplified the API to instead return something a list of strings and have layers follow the format:

{
    layers: [
        "Name: object1 | val1 = 0 | val2 = 3",
        "Name: object2 | val1 = 2 | val2 = 4"
        ...
    ]
}

I’m still trying to get it to work with repeating groups but it seems like it’s not extracting the strings from the list correctly.

Here’s what the debugger shows:

I didn’t change anything with the RG yet, am I supposed to add something to it?

[Jici]

Is it your own API?

[howardw0620]

Yes, is there a way I can set it to optimally interact with an RG?

[Jici]

Yes. The best is to build a correct json payload like:

{
	"layers": [{
			"Name": "object1",
			"val1": 0,
			"val2": 3
		},
		{
			"Name": "object2",
			"val1": 1,
			"val2": 4
		}
	]
}

[howardw0620]

Ok I switched up the return object and see this as the data source for my RG:

[Jici]

So now to display data you can use text element and use current cell value for exemple