Demo Channel: Showing JSON data

Our 'Showing JSON data' demo channel sends toasts with content made up of five toast elements combined into one: three text blocks and two JSON blocks. We break down the different elements below.

Note: the alert at the top is not part of the toast content - it is the toast alert. The toast alert is the push notification message that subscribers receive. This is automatically added as a headline at the top of the toast.

Demo channel 5

The text blocks

Text is shown with the type set to 'text' and the text you want to show set in 'text'. You can optionally set a text style by setting the style to one of 'headline', 'subhead', 'body' or 'footnote'. The default style is 'body'.

In this example we use three different text blocks: one with 'body' styles and two with 'footnote' style.

{ type: "text", style: "body", text: "A demonstration toast with JSON data" }
{ type: "text", style: "footnote", text: "JSON array with different object types" }
{ type: "text", style: "footnote", text: "JSON object" }
JavaScript

The JSON blocks

JSON is shown with the type set to 'json' and the json you want to show set in the json field.

In this example we use two different JSON blocks - one a JSON array and the other a JSON object. The formatting and 'pretty printing' is taken care of by ToastWorx.

{ type: "json", json: [ "hello", "world", 11, true ] }

{ type: "json", json: { petTypes: [ "cats", "dogs", "fish" ], myPet: { type: "dog", name: "Penny", age: 2, likesCats: false } } }
JavaScript

Bringing it all together

All of the elements of the toast are combined into an array and this is set as the toast content. 

const content = [
  { type: "text", style: "body", text: "A demonstration toast with JSON data" },
  { type: "text", style: "footnote", text: "JSON array with different object types" },
  { type: "json", json: [ "hello", "world", 11, true ] },
  { type: "text", style: "footnote", text: "JSON object" },
  { type: "json", json: { petTypes: [ "cats", "dogs", "fish" ], myPet: { type: "dog", name: "Penny", age: 2, likesCats: false } } }
];
JavaScript

A full toast also includes the toast alert which is the push notification message that subscribers see as well as an optional sound set to one of the sounds ('bell 1', 'bell 2', 'buzz', 'claps', 'glitch', 'klaxon', 'oops', 'register', 'toaster 1', 'toaster 2' or 'yippee'). The complete toast for the word of the day demo channel is below. POST to /channels/{channelUUID}/toasts with this as the POST body: 

//POST body
{
  alert: "Thursday's JSON toast demo",
  sound: "toaster 2",
  content: [
    { type: "text", style: "body", text: "A demonstration toast with JSON data" },
    { type: "text", style: "footnote", text: "JSON array with different object types" },
    { type: "json", json: [ "hello", "world", 11, true ] },
    { type: "text", style: "footnote", text: "JSON object" },
    { type: "json", json: { petTypes: [ "cats", "dogs", "fish" ], myPet: { type: "dog", name: "Penny", age: 2, likesCats: false } } }
  ]
};
JavaScript

Example Javascript code

Here's an example of how you could create this toast using Javascript. If you want to use this code make sure to change {your-api-key} to your API key and {channelUUID} to one of your channels. 

const body = {
  alert: "Thursday's JSON toast demo",
  sound: "toaster 2",
  content: [
    { type: "text", style: "body", text: "A demonstration toast with JSON data" },
    { type: "text", style: "footnote", text: "JSON array with different object types" },
    { type: "json", json: [ "hello", "world", 11, true ] },
    { type: "text", style: "footnote", text: "JSON object" },
    { type: "json", json: { petTypes: [ "cats", "dogs", "fish" ], myPet: { type: "dog", name: "Penny", age: 2, likesCats: false } } }
  ]
};

const headers = {
  'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Authorization': 'Bearer {your-api-key}'
};

fetch('https://api.toastworx.com/channels/{channelUUID}/toasts',
{
  method: 'POST',
  headers: headers,
  body: JSON.stringify(body)
})
.then(function(res) {
    return res.json();
}).then(function(body) {
    console.log(body);
});
JavaScript

Subscribe to this channel

To subscribe to this channel scan the QR code below in the ToastWorx app.

Demo channel 5