How to create complex data structures for API calls in Bubble.io: Step-by-Step G

Go to the Plugins tab, open the API Connector, and create or select an API call. Set the method to POST (or PUT/PATCH). Below the URL field, you will see the Body section. Bubble supports two body formats: form-data parameters (key-value pairs) and raw JSON. For complex structures, use raw JSON by typing directly in the body field. Parameters are marked with angle brackets: <parameter_name>. Each parameter becomes a dynamic field you can set in workflows.

In the body field, construct your nested JSON. For example, to call an API that expects a customer with an address: type the full JSON structure with parameters at each dynamic value. Use descriptive parameter names that include the nesting path for clarity. Set Content-Type header to application/json. Bubble will create input fields for each parameter when you use this call in a workflow.

1{
2  "customer": {
3    "name": "<customer_name>",
4    "email": "<customer_email>",
5    "address": {
6      "street": "<address_street>",
7      "city": "<address_city>",
8      "state": "<address_state>",
9      "zip": "<address_zip>"
10    }
11  },
12  "order": {
13    "total": <order_total>,
14    "currency": "<order_currency>"
15  }
16}

Many APIs expect arrays — for example, a list of line items. Bubble's API Connector does not natively support dynamic-length arrays in the body editor. The workaround is to construct the array as a single text parameter. In your body, use: "items": <items_json>. Then in your workflow, build the JSON array string using Bubble's text operations: format each item as a JSON object string, join them with commas, and wrap in square brackets. Pass this concatenated string as the items_json parameter.

1{
2  "order_id": "<order_id>",
3  "items": <items_json>,
4  "metadata": {
5    "source": "<source>",
6    "version": "1.0"
7  }
8}

Click Initialize call and fill in all parameters with realistic sample data. For nested objects, enter valid values for each field. For the array parameter, enter a valid JSON array string like [{"name":"Item 1","qty":2},{"name":"Item 2","qty":1}]. Click Initialize. Bubble makes the actual API call and maps the response structure. Check that the response fields are correctly identified. If the response is deeply nested, Bubble will show the full path to each field.

Go to the Workflow tab and add an action: Plugins then your API call name. You will see input fields for every parameter defined in the body. Set each parameter from your page inputs, database fields, or calculated expressions. For the array parameter, build the JSON string using an expression like: Search for CartItems:format as text (with each item formatted as {"name":"This CartItem's Product's name","qty":This CartItem's quantity}) joined by commas, wrapped in [ and ]. Reference the response using Result of step X's body.field_path.

If the API returns an error, use the Server Logs (Logs tab) to see the actual request sent and the response received. Common issues: missing quotes around string values, extra quotes around number values, malformed JSON in the array parameter, or incorrect Content-Type header. Copy the request body from the logs and paste it into a JSON validator (like jsonlint.com) to identify syntax errors. For complex API integrations, consider reaching out to RapidDev for expert Bubble development.