JSON Parse Operator

The JSON Parse operator is a Data Workflow component function that converts a JSON string into a structured JSON data object. The parsing process, also known as deserialization, enables Creators to organize and manipulate the JSON data in a common, structured format. The parsed JSON data can then be manipulated using Data & Event Processing components.

For example, consider the following unstructured JSON text: [{"name":"Victor1","id":"1"},{"name":"Victor2","id":""},{"name":"Victor3","id":"3"}]. After processing the JSON using the JSON Parse operator, the operator outputs the following restructured data using the DevTools Console in Express View:

A static image displaying a parsed JSON string in Express View.

You'll find the Input operator under the Value/String group to the left of the Data Workflow canvas.

Here's what the JSON Parse operator looks like, along with its Info window:

A static image displaying the Data Workflow Canvas view of the JSON Parse operator and its Info window.

Setting

Description

Label

Sets the label for your operator and displays beneath your operator on your Data Workflow canvas.

This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows.

Preserve Argument Type

When selected, this setting ensures the argument data type is respected when the operator executes.

To demonstrate an example of the JSON Parse operator, build a module that parses serialized JSON using a Data Workflow component.

Configure the Button Component

For this example, configure a Button component to trigger the Data Workflow component:

1. In the Module Builder, drag and drop a Button component Icon Button component onto your canvas.
2. In the Property ID field, enter btnParseJson.
3. In the Label Text field, enter Parse JSON.
4. From the Action Type drop-down, select Event.
5. From the On Click drop-down, select dwfParseJSON.

You'll configure the dwfParseJson Data Workflow component in a later step.

A static image displaying the Button configuration.

6. Click Save Component.

Configure the Hidden Component

Use a Hidden component to store the stringified JSON data. The Data Workflow component retrieves the data from the Hidden component when the button is clicked.

1. Drag and drop a iconHidden component onto your canvas, placing it below the btnParseJson Button component Icon Button component.
2. In the Property ID field, enter jsonData.
3. In the Field Text field, enter jsonData.
4. Navigate to the component's Data settings.
5. In the Default Value field, enter the following: [{"name":"Victor1","id":"1"},{"name":"Victor2","id":""},{"name":"Victor3","id":"3"}].
6. Click Save Component.

Configure the Data Workflow Component

The Data Workflow component retrieves the JSON string from the jsonData iconHidden component, and uses the JSON Parse operator to convert it to a JSON object.

1. Drag and drop a Data Workflow component onto your canvas, placing it below the jsonData iconHidden component.
2. In the Property ID and Field Text fields, enter dwfParseJSON.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.
2. Configure the operator's Info window as follows:

Setting

Value

Component

jsonData

Required

Yes

Source

Default

Configure the JSON Parse Operator

1. Drag and drop a JSON Parse operator onto your Data Workflow canvas.
2. Configure the operator's Info window as follows:

Setting

Value

Label

Parse JSON

Preserve Argument Type

☐ (unchecked)

3. Connect the output port (right) of the Input operator to the input port (left) of the Parse JSON JSON Parse operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.
2. Configure the operator's Info window as follows:

Setting

Value

Component

jsonData

Action

value

This example sends the JSON object to the jsonData iconHidden component.

Configure the Console Operators

For this example, add two Console operators to inspect the JSON string before and after it enters the JSON Parse operator. You'll review the data using the DevTools Console in Express View.

1. Drag and drop a Console operator onto your Data Workflow canvas.
2. Configure the operator's Info window as follows:

Setting

Value

Label

Before Parse

3. Connect the output port (right) of the Input operator to the input port (left) of the Before Parse Console operator.
4. Drag and drop a second Console operator onto your Data Workflow canvas.
5. Configure the operator's Info window as follows:

Setting

Value

Label

After Parse

6. Connect the output port (right) of the Parse JSON JSON Parse operator to the input port (left) of the After Parse Console operator.
7. Click Save Component.
8. Save your module.

Your completed module looks like the following:

A static image displaying the completed configuration in the Module Builder.

Preview your module in Express View. Open the DevTools Console and click the Parse JSON button to trigger the Data Workflow. The Before Parse Console operator displays the serialized JSON data. The After Parse Console operator displays the JSON data after being parsed by the JSON Parse operator. Then, the Data Workflow outputs the JSON object to the jsonData iconHidden component.

A static image displaying the data in the DevTools Console after clicking the Trigger Data Workflow button.