Sending a JSON Array with Outgoing Webhooks

The Send data to Webhook action is a powerful tool that allows your WordPress site to integrate with any number of other systems and services that support receiving data via webhooks.

This article includes guidance that will allow Automator users to create a JSON Array inside a recipe and send it to another app or website.

What is a JSON Array?

A JSON array is an ordered collection of values enclosed in square brackets. It begins with [ and ends with ]. The values in the arrays are separated by , (comma).

Differentiating between JSON Array and JSON Object

Unlike a JSON Array, which starts with [ and ends with ] square brackets, a JSON Object starts with { and ends with } curly brackets.

Identifying whether the required format is a JSON Array or Object is necessary before creating a Key/Value pair in an Uncanny Automator recipe. A recipe’s “Key” column can generate a JSON Array or Object, depending on how the values are entered. In most cases, the service or app you’re connecting to will have documentation about required settings and expected format.

Creating Key/Value pairs in Automator

In all of the examples shown below, the following fields were set to:

• URL: Your service/app/API URL, as provided by the service
• Request method: Default to POST. Your service/app/API documentation will provide the details of whether it expects a POST, PUT, or GET method.
• Data format: JSON
• Headers: Leave default unless your service/app/API has specific instructions, like Authorization. 

In Key column of the webhook action, entering numeric indexes 0, 1, 2, etc., as a prefix will create indexed arrays. The Key field accepts / (forward slash) as a separator and allows the nesting of the data. By using this formatting, Automator automatically builds the correct JSON Array by combining the Key/Value pairs. 

As an example, Entering Key = 0/name and Value = John means that the resulting JSON should be an array (since the key starts with a digit), and at index “0” that has a “name” key. The resulting data will look something like this:

[
    {
        "name": "John"
    }
]

Extending the above example and adding another name like Key = 1/name, Value = Cena, the result should be:

[
    {
        "name": "John"
    },
    {
        "name": "Cena"
    }
]

You can create arrays within the array by assigning digit indexes separated by / (forward slash). 

The “Data type” column allows you the flexibility to define Text (default), Number, Boolean (0 or 1, true or false) and NULL values for your data. Any text added to the “Value” column will be enclosed in double quotes, including numbers. Alternatively, you can switch the Data type from Text to Number to pass the numeric values.

Checking the data format before sending it to the destination is very easy with our built-in “Check data format” button. You can continue building your JSON Array in the UI, compare the format, and update or fix it.

Example 1 (Simple JSON Array)

[
  100,
  500,
  300,
  200,
  400
]

Recipe UI:

Result:

Example 2 (JSON Array with objects as elements)

[
	{
		color: "red",
		value: "#f00"
	},
	{
		color: "green",
		value: "#0f0"
	},
	{
		color: "blue",
		value: "#00f"
	},
	{
		color: "cyan",
		value: "#0ff"
	}
]

Recipe UI:

Result:

Example 3 (A complex JSON Array with JSON Object elements)

[
    {
        "data": [
            {
                "id": 282727,
                "status": 1,
                "vat_id": 1,
                "stock": [
                    {
                        "warehouse_id": 1,
                        "value": 1
                    }
                ],
                "handling_time": [
                    {
                        "warehouse_id": 1,
                        "value": 1
                    }
                ],
                "sale_price": 12000
            }
        ]
    }
]

Recipe UI:

Result:

And that’s it! You now have a recipe that sends a webhook from your WordPress site as a JSON Array.

Please note that your WordPress site must be adequately secured with a valid SSL certificate to pass webhook data security checks.