Mini Guide: Build Complex JSON Arrays

rico.trevisan · 2020-12-26T08:01:50.582Z

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.

List Shifter
JSON Generator

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 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 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 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 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:

trigger a iterate workflow from the button press
1. reset the page states
2. Start a List Shifter Iterate
for each iteration object
1. sets the JSON
2. save that JSON to the page state
3. save that to the list page state
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 11368×556 121 KB

JSON Guide - Workflow 21360×560 124 KB

JSON Guide - Workflow 31352×598 110 KB

JSON Guide - Workflow 3 Detail1338×1474 201 KB

Final Result

JSON Guide - End Result2018×890 164 KB

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

Links

Preview
Editor

JohnMark · 2020-12-26T08:08:23.358Z

@rico.trevisan Great and Merry Christmas

gf_wolfer · 2020-12-26T15:51:45.858Z

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_AM1191×419 65.3 KB

rico.trevisan · 2020-12-26T19:03:51.764Z

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!

nocodeventure · 2020-12-26T19:20:28.581Z

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

ezhang · 2021-03-18T20:04:03.804Z

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.

image615×622 26.9 KB

Here is how I set up the API call:

image802×571 24.6 KB

Would you please provide some insights?

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

stepwave.io · 2022-09-20T13:06:53.530Z

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

pratima.dudhewar · 2022-09-28T13:08:50.744Z

@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?

azlin · 2024-08-29T03:40:58.208Z

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

rjwilkinson10 · 2024-08-29T21:38:56.220Z

List shifter essentially became Floppy:

Bubble

Templates for Bubble

Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code.

Jici · 2024-08-30T00:40:51.423Z

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

rico.trevisan · 2024-09-01T11:29:56.584Z

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

azlin · 2024-09-02T01:32:02.826Z

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,…

azlin · 2024-09-03T01:59:03.852Z

Just seems to work now,

need to change quiet a few things.

This video help: