JSON Parse Operator

Overview                                        

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:

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

About the Info Window

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

Adding a JSON Parse Operator

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 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.

                                              

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 Hidden component onto your canvas, placing it below the btnParseJson  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 Hidden 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 Hidden 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 Hidden 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:

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 Hidden component.

Resources

• Modify the JSON Parse Operator.

• You can view the JSON Parse use case here: https://training.unqork.io/app/designer?r=081330#/display/module-builder?moduleId=67573237b3b7652b5722fe51.

• Understand JSON, Arrays, and Tables.

• Data Workflow Component.

• Introduction to Data Workflow Value/String Operators.