Mini Guide: Build Complex JSON Arrays

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

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

Set up the Page

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

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

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

Final Result

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


Links

Preview
Editor

22 Likes

@rico.trevisan Great and Merry Christmas :partying_face:

1 Like

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?

13 Likes

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!

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

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.


Here is how I set up the API call:

Would you please provide some insights?

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

1 Like

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

1 Like

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