--- title: "Object2Table Operator" slug: "object2table-operator" updated: 2025-09-26T02:07:25Z published: 2025-09-26T02:07:25Z canonical: "docs.unqork.io/object2table-operator" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Object2Table Operator UDesignerClassic Designer ## Overview The **Object2Table operator** creates a table from an object, with each key/value pair in the object becoming a row in the final table. Because a table is an indexed array of objects, each key/value pair in the object becomes a separate object in an array. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_DataWorkflow_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) You'll find the Object2Table operator under the [Object](/v1/docs/object-operators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas. ## About the Info Window And here's a breakdown of each setting in the Info window: | Info | | --- | | Category | Grayed out and non-adjustable setting indicating the operation type. | | Label | Sets the label for your operator, displaying below the 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. | | Key Column Name | Each key/value pair in the source object becomes an object split into two key/value pairs. For example, converting `{"a":"b"}` to `{"key":"a", "value":"b"}`. Enter the name of the key for the `"key"`. | | Value Column Name | Each key/value pair in the source object becomes an object split into two key/value pairs. For example, converting `{"a":"b"}` to `{"key":"a", "value":"b"}`. Enter the name of the value for the `"value"`. | ## Adding an Object2Table Operator This example uses the Object2Table operator to create a table out of an object. You'll also define the object using a [Hidden](/v1/docs/hidden-component) component. > [!NOTE] > These instructions assume you have a new module open and saved with a title. ### Configure the Hidden Component First, you'll configure a [Hidden](/v1/docs/hidden-component) component to create a sample object. Define a JSON object in the Default Value field. This sample object contains three key/value pairs. 1. Drag and drop a **H****idden** component onto your canvas. 2. In the Property ID and Label Text fields, enter `sampleObject`. 3. Navigate to the **Data** settings. 4. In the **Default Value** field, enter `{"name":"Theola", "age":35, "city":"Massapequa"}`. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_Hidden_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) 5. Click **Save Component**. ### Configure the Data Workflow Component Next, create the Data Workflow that converts your object into a table. 1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it below the **sampleObject** **H****idden** component. 2. In the Property ID field, enter **dwfObject2Table**. 3. In theCanvas Label Text, enter `dwfObject2Table`. #### Configure the Input Operator This operator brings your source data into the Data Workflow. 1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas. 2. Configure the **I****nput** operator's **Info** window as follows: | Info | | --- | | Category | Input | | Component | sampleObject | | Required | Yes | | Source | Default | #### Configure the First Console Operator This operator helps you view the Data Workflow before its modified. Later, you'll add another Console operator to show the results of the Object2Table operator. 1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Info | | --- | | Category | Console | | Label | Before Object2Table | 3. Connect the output port (right) of the **sampleObject** **I****nput** operator to the input port (left) of the **Before Object2Table** **C****onsole** operator. #### Configure the JSON Parse Operator This operator takes the JSON object defined in your Hidden component and converts it into an object data structure. 1. Drag and drop a **J****SON Parse** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Info | | --- | | Category | JSON Parse | | Label | JSON Parse | 3. Connect the output port (right) of the **sampleObject** **I****nput** operator to the input port (left) of the **JSON Parse** **J****SON Parse** operator. #### Configure the Object2Table Operator Now, set up the Object2Table operator. Notice the value you enter in the Info window's Key Column Name and Value Column Name fields. These are the two column headers of your final table. 1. Drag and drop an **O****bject2Table** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Info | | --- | | Category | Object2Table | | Label | Create Table | | Key Column Name | testKey | | Key Value Name | testValue | 3. Connect the output port (right) of the **JSON Parse** **J****SON Parse** operator to the input port (left) of the **Create Table** **O****bject2Table** operator. #### Configure the Second Console Operator This operator lets you view the results of the Object2Table operator. When creating applications, you'll typically use a dedicated Output operator to store the data in a Hidden component. 1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Info | | --- | | Category | Console | | Label | After Object2Table | 3. Connect the output port (right) of the **Create Table** **O****bject2Table** operator to the input port (left) of the **After Object2Table** **C****onsole** operator. 4. Click **Save Component**. Here's how the completed Data Workflow looks: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_DW_Configuration_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) ### Configure the Button Component Lastly, add a [Button](/v1/docs/button-component) component to trigger the Data Workflow and convert your object into a table. 1. Drag and drop a **Button** component onto your canvas, placing it above the **D****ata Workflow** component. 2. In the Property ID field, enter **btnRunDWF**. 3. In the Label Text field, enter `Run Object2Table`. 4. From the **Action Type** drop-down, select **Event**. 5. From the **On Click** drop-down, select **dwfObject2Table**. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/object2table_Button_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) 6. Click **Save Component**. 7. **Save** your module. Here's how the completed example looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_MB_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **Preview** your module in Express View and open the DevTools Console. Click the button and view the data before and after Object2Table operation. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_Preview_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) ## Overview The **Object2Table operator** creates a table from an object, with each key/value pair in the object becoming a row in the final table. Because a table is an indexed array of objects, each key/value pair in the object becomes a separate object in an array. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_classiccomponent_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) You'll find the Object2Table operator under the [Object](/v1/docs/object-operators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas. ## About the Info Window Learn more about each setting in the Object2Table operator's Info window: | Setting | Description | | --- | --- | | Label | Sets the label for your operator, displaying below the 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. | | Key Column Name | Each key/value pair in the source object becomes an object split into two key/value pairs. For example, converting `{"a":"b"}` to `{"key":"a", "value":"b"}`. Enter the name of the key for the `"key"`. | | Value Column Name | Each key/value pair in the source object becomes an object split into two key/value pairs. For example, converting `{"a":"b"}` to `{"key":"a", "value":"b"}`. Enter the name of the value for the `"value"`. | ## Adding and Configuring the Object2Table Operator This example uses the Object2Table operator to create a table out of an object. You'll also define the object using a [Hidden](/v1/docs/hidden-component) component. > [!NOTE] > These instructions assume you have a new module open and saved with a title. ### Configure the Hidden Component First, you'll configure a [Hidden](/v1/docs/hidden-component) component to create a sample object. Define a JSON object in the Default Value field. This sample object contains three key/value pairs. 1. Drag and drop a **H****idden** component onto your canvas. 2. In the Property ID and Canvas Label Text fields, enter `sampleObject`. 3. Navigate to the component's **Data** section. 4. In the **Default Value** field, enter `{"name":"Theola", "age":35, "city":"Massapequa"}`. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_hidden_classic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) 5. Click **Save & Close**. ### Configure the Data Workflow Component Next, you'll configure the Data Workflow that converts your object into a table. 1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it below the **sampleObject** **H****idden** component. 2. In the Canvas Label Text and Property ID fields, enter `dwfObject2Table`. #### Configure the Input Operator This operator brings your source data into the Data Workflow. 1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas. 2. Configure the **I****nput** operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Input | | Component | sampleObject | | Required | Yes | | Source | Default | #### Configure the First Console Operator This operator helps you view the Data Workflow before its modified. Later, you'll add another Console operator to show the results of the Object2Table operator. 1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Console | | Label | Before Object2Table | 3. Connect the output port (right) of the **sampleObject** **I****nput** operator to the input port (left) of the **Before Object2Table** **C****onsole** operator. #### Configure the JSON Parse Operator This operator takes the JSON object defined in your Hidden component and converts it into an object data structure. 1. Drag and drop a **J****SON Parse** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | JSON Parse | | Label | JSON Parse | 3. Connect the output port (right) of the **sampleObject****I****nput** operator to the input port (left) of the **JSON Parse****J****SON Parse** operator. #### Configure the Object2Table Operator Now, set up the Object2Table operator. Notice the value you enter in the Info window's Key Column Name and Value Column Name fields. These are the two column headers of your final table. 1. Drag and drop an **O****bject2Table** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Object2Table | | Label | Create Table | | Key Column Name | testKey | | Key Value Name | testValue | 3. Connect the output port (right) of the **JSON Parse****J****SON Parse** operator to the input port (left) of the **Create Table****O****bject2Table** operator. #### Configure the Second Console Operator This operator lets you view the results of the Object2Table operator. When creating applications, you'll typically use a dedicated Output operator to store the data in a Hidden component. 1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Console | | Label | After Object2Table | 3. Connect the output port (right) of the **Create Table** **O****bject2Table** operator to the input port (left) of the **After Object2Table** **C****onsole** operator. 4. Click **Save**. Here's how the completed Data Workflow looks: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2Table_classicDW_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) ### Configure the Button Component Lastly, add a [Button](/v1/docs/button-component) component to trigger the Data Workflow and convert your object into a table. 1. Drag and drop a **Button** component onto your canvas, placing it above the **D****ata Workflow** component. 2. In the Property ID field, enter **btnRunDWF**. 3. In the Label Text field, enter `Run Object2Table`. 4. To the left of the component's configuration window, click **Actions**. 5. Set the **Action Type** as **Event**. 6. From the **On Click** drop-down, select **dwfObject2Table**. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2Table_classicbutton_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) 7. Click **Save & Close**. 8. **Save** your module. Here's how the completed example looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_classicMB_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **Preview** your module in Express View and open the DevTools Console. Click the button and view the data before and after Object2Table operation. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Object2table_Preview_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) ## Resources - [Introduction to Data Workflow](/v1/docs/introduction-to-data-workflow) - [Modifying Data Workflow Operators](/v1/docs/modifying-data-workflow-operators). - [Introduction to Data Workflow Operators](/v1/docs/data-workflow-operators) - [Data Workflow component](/v1/docs/data-workflow-component) - [Input operator](/v1/docs/input-operator) - [Output operator](/v1/docs/output-operator) - [Gateway Operators](/v1/docs/introduction-to-data-workflow-gateways-operators) An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity. An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects. JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases. A Property ID is the unique field ID used by Unqork to track and link components in your module. Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. The DevTools Console helps you securely store, build, test, and deploy your software.