Mini Guide: Build Complex JSON Arrays

Showcase
1

I’ve been hitting my head against the wall trying to create a complex interaction for an app. I discovered a flexible and extensible answer. As a way to contribute back to the hive mind, I created this mini guide.

End-product is a JSON that is ready to be used in the body of an API. Here’s a minimal version:

{
	"customer_id":"bob_joe",
	"subitems":[{
		"description": "static IP",
		"value": 42.00,
		"quantity": 1
		},
		"description": "Base Subscription",
		"value": 109,
		"quantity": 1
	]}
}

Plugins needed

Both are free plugins, send these guys a coin if you appreciate it.

Configuring the API Connector

Like a good meal, development is best started from the end step.

Our end goal is to send a JSON object via the API plugin. To do that, all we need to do is to create a single variable in the JSON body called <body>.

API Connector Setup
API Connector Setup1632×1236 205 KB

Set up the Page States

We will need a set up a few page states to temporarily store the information we are iterating through.

  • one state that holds the temporary JSON array → Subitem
  • one state that holds a list of those JSON arrays → Subitem List

JSON Guide - 1 Create States
JSON Guide - 1 Create States1404×790 137 KB

Set up the Page

We will need a List Shifter and a JSON Generator elements on the page.

JSON Guide - 2 Set up the Page
JSON Guide - 2 Set up the Page952×630 84.8 KB

We also need some list. For this list I created a group to create subitems. Those subitems are displayed below on a list.

JSON Guide - Page Setup
JSON Guide - Page Setup1692×806 83.4 KB

Iterate to Create the Nested Arrays

On this step we will use the wonderful List Shifter to iterate through a list of subitems to create each JSON subitem.

To do that, we need to:

  1. trigger a iterate workflow from the button press
    1. reset the page states
    2. Start a List Shifter Iterate
  2. for each iteration object
    1. sets the JSON
    2. save that JSON to the page state
    3. save that to the list page state
  3. when the iteration is finished
    1. create the final JSON. Make sure to add around the JSON object to make sure it is a list.

From here we can send that whole JSON to an API.

Here are some screenshots of the workflow page

JSON Guide - Workflow 1
JSON Guide - Workflow 11368×556 121 KB

JSON Guide - Workflow 2
JSON Guide - Workflow 21360×560 124 KB

JSON Guide - Workflow 3
JSON Guide - Workflow 31352×598 110 KB

JSON Guide - Workflow 3 Detail
JSON Guide - Workflow 3 Detail1338×1474 201 KB

Final Result

JSON Guide - End Result
JSON Guide - End Result2018×890 164 KB

That text can then be sent to our API as the entire body.

Links

Preview
Editor

22 Likes
2

@rico.trevisan Great and Merry Christmas :partying_face:

1 Like
3

Thanks for the tip! I am using something similar but with the Toolbox ListExpression.

But the good news is I think there is a simpler way to do this without elements or plugins since this announcement: [New Feature] '...:format as text' operator on lists

Would something like this would also work for your use case?

Screenshot_122620_105118_AM
Screenshot_122620_105118_AM1191×419 65.3 KB

14 Likes
4

Wow, this is great, I just learned something new. Thanks.

I had seen this post passing by, but I didn’t even click in it thinking it wasn’t for me. They should have named it how to build complex JSON arrays in 1 simple step!

1 Like
5

Awesome, thanks for the share. Really appreciated, this will revive an old Plugin project of mine :boom:

6

Hi @rico.trevisan ,

Thanks for the great tutorial! I tried to put <body> as a dynamic value. However, when I tried to use the API call action in my workflows, it won’t ask my for the key, which is the body value here.

image
image615×622 26.9 KB

Here is how I set up the API call:
image
image802×571 24.6 KB

Would you please provide some insights?

Please ignore this post… I didn’t uncheck “private”.

1 Like
8

You need to untick “private” in the body parameter row.

1 Like
9

@rico.trevisan
I was trying to do it the same way. But i have one query, i want this custom states to of API data type. and Is there a way to convert json string into the custom data type?

10

Hello, @rico.trevisan the lift shifter that your using is not available anymore.
Any suggestion

11

List shifter essentially became Floppy:

1 Like
12

In most case, this solution can be replaced by native Bubble function with :format as text on the list.

2 Likes
13

:point_up_2:
Yep. + :format as JSON safe can do most formatting you need.

1 Like
14

I see,

I’m really new,

Is there a video that I could watch for the format as text. As I am heavily dependent on it. or the sample of page which i can refer to. like the list shift array

Basically, what I want is the function to go through all of the database of the whole table and put it in one readable text or json. Which will automatically change when the data is changed(or Updated) and read by the api (ChatGPT).

Couldn’t find dynamic expression that match my need, or just haven’t able to manipulate the function to my liking.

I’ve used the :format to text, but I couldn’t make it run. Tho currently, its seems as the closest answer

My current solution is: use each item item to list out all of the columns. But I need all rows and columns in a more readable format
.

The problem with :each item item is that the data will be like:

1,2,3,itemA,itemB,itemC,codeA,codeB,codeC,…

while I want:
1,itemA,codeA,2,itemB,codeB,…

15

Just seems to work now,

need to change quiet a few things.

This video help:

1 Like