Sending a JSON Object 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 allowing Automator users to create a JSON Object inside a recipe and send it to another app or website.

What is a JSON Object?

A JSON Object is an ordered collection of values enclosed in curly braces, as described in a W3School article.

JSON object literals are surrounded by curly braces {}. JSON object literals contains key/value pairs. Keys and values are separated by a colon.

Keys must be strings, and values must be a valid JSON data type:

• string
• number
• object
• array
• boolean
• null

Differentiating between JSON Object and JSON Array

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 the Key column of the webhook action, entering named property like data, name, product, etc., followed by other named properties will create JSON Object. The Key field accepts / (forward slash) as a separator and allows the nesting of the data. Automator automatically builds the correct JSON Object using this formatting by combining the Key/Value pairs. In most cases, your destination service/API developer’s documentation will provide you with examples to quickly visualize and build data in Automator’s Recipe UI.

For example, Entering Key = data/first_name and Value = John means that the resulting JSON would be an object (since the key starts with a string), the data has a property “first_name” and the Value John. The resulting data will look something like this:

{
    "data": {
        "first_name": "John"
    }
}

Extending the above example and adding another row like Key = data/last_name, Value = Doe, Key = data/email and Value = john@doe.xyz will result in:

{
    "data": {
        "first_name": "John",
        "last_name": "Doe",
        "email": "john@doe.xyz"
    }
}

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

Adding the above Key/Value pair in the Recipe UI will generate the following JSON Object. Notice that the product is an Array with the Object, where two product information is passed along with the user’s data.

{
    "data": {
        "user": {
            "first_name": "John",
            "last_name": "Cena",
            "email": "john@cena.xyz"
        },
        "product": [
            {
                "name": "Sample product 1",
                "price": 99.99
            },
            {
                "name": 49.99
            }
        ]
    }
}

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 Object in the UI, compare the format, and update or fix it.

Example 1 (Simple JSON Object)

{
	color: "red",
	value: "#f00"
}

Recipe UI:

Result:

Example 2 (JSON Object with image details)

An example of JSON Objects nested structure, showing the “image” and “thumbnail” properties in the following example:

{
	"id": "0001",
	"type": "donut",
	"name": "Cake",
	"image":
		{
			"url": "images/0001.jpg",
			"width": 200,
			"height": 200
		},
	"thumbnail":
		{
			"url": "images/thumbnails/0001.jpg",
			"width": 32,
			"height": 32
		}
}

Recipe UI:

Result:

Example 3 (A complex JSON Object)

An example of Google Maps JSON Objects nested structure, showing the “destination” and “origin” in the following example:

{
  "destination_addresses": [
    "Philadelphia, PA, USA"
  ],
  "origin_addresses": [
    "New York, NY, USA"
  ],
  "rows": [
    {
      "elements": [
        {
          "distance": {
            "text": "94.6 mi",
            "value": 152193
          },
          "duration": {
            "text": "1 hour 44 mins",
            "value": 6227
          },
          "status": "OK"
        }
      ]
    }
  ],
  "status": "OK"
}

Recipe UI:

Explanation:

Result:

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

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