How to: Turn Object Keys Into camelCase Using Lodash

Overview

Sometimes, you might need to change your data objects to camelCase A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton.. This is especially helpful when building your applications since Unqork uses camelCase for object and Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. naming. To do that, use the _.invert and _.camelCase Lodash functions.

To read more about the _.invert and _.camelCase parameters, you can visit: https://lodash.com/docs/4.17.15.

How This Example Works

To turn your data into camelCase, you must first retrieve a data set with object keys that do not use camelCase. In this example, you'll retrieve your data from a transform. Once you have the data in your module, your Data Workflow swaps the information in your object's key and value pairs. Then, your Data Workflow turns your inverted object values into camelCase. The last step inverts the key/value pairs again to their original order.

Here are the basic steps for this example: 

1. Set up and execute the transform's input data.
2. Invert input data keys into object values.
3. Convert inverted values into camelCase.
4. Revert inverted values into object keys.

Here's how the completed configuration looks in the Module Builder:

A static image displaying the turn object keys into camelCase using Lodash use case in the UDesigner module builder.

Setting Up Your Input Data

Creating Your Input Data

Before you can convert data into camelCase, you need a data set to make your alterations. In this example, you'll set up a transform and call the transform data into your module. Open Transforms page from the Module Builder and create a new transform called data. Then, set the Direction of Transform to Output and the Type of Transform to Output NJK(JSON). In the Transform body, enter the following: 

Copy
{
    "first_name":"Joan",
    "last_name":"Jonas",
    "street-address":"123 Main St.",
    "favoriteColor":"Orange"
}

Here's how the transform looks on the Transforms page: 

A static image displaying the transform configuration for the use case in UDesigner.

Calling the Data in Your Module

Now that your transform is ready, you can call it in your module using a Plug-In component. Before you configure your Plug-In, add a Hidden component to store your transform data, naiming it user. Then, add the Plug-In component and name it plugGetData.

In your Plug-In component's Inputs table, enter the following: 

Property ID

Mapping

'Enter Your Module ID'

moduleId

'Enter Your Transform Name'

transformName

'Enter the Field to Transform'

data

Next, you'll add the user iconHidden component as the output for your Plug-In component. Because you used a NJK(JSON) transform, your output Mapping is jsonData. Your transform exists in the same module where you call it, so you'll use the Internal ServiceService Type and set it to Execute Transform with Input Data.

Here's how the plugGetData Plug-In component's configuration looks: 

A static image displaying the UDesigner Plug-In configuration for the turn object keys into camelCase using Lodash use case.

And here's how the components look in the Module Builder

A static image displaying the set object values with Lodash use case with the Plug-In and Hidden component added in the UDesigner module builder.

Initiating Your Data Transformation

Now you can retrieve your data using an Initializer component. Name your Radio Button component icon Initializer component initOnLoad and set the Trigger Type to New Submission. In the Outputs table Enter outputs components and actions you want the component to perform., enter your plugGetData Plug-In component to trigger it.

Here's how the components look in your Module Builder

A static image displaying the set object values with Lodash use case with the Initializer, Plug-In, and Hidden components added in the UDesigner module builder.

Inverting Your Data Object Keys

With the input data in your module, you'll convert the placement of your key/value pairs. To do that, add a Data Workflow component and name it dwfConvertToCamelCase. Your Data Workflow begins with an Input operator that retrieves your user iconHidden component's transform data. Then, add a Formula operator with the _.invert Lodash function. This function converts the key/value data in the object's key/value pair. To track the results of this inversion using the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software., you'll connect a Console operator.

Before viewing the Console output in the DevTools Console, your dwfConvertToCamelCase Data Workflow Icon Data Workflow component needs a trigger. In your plugGetData Plug-In component's Post-Trigger field, enter your Data Workflow's Property Name.

Here's how the Info windows look for your operators:

1. Input operator:

Setting

Value

Category

Input

Component

user

Required

Yes

Source

Default

2. Formula operator:

Setting

Value

Category

Formula Value

Label

Invert Value

Formula/Expression

value=LODASH("invert",A)

3. Console operator:

Setting

Value

Category

Console

Label

Invert Key to Value

Here's how the operators look on your Data Workflow canvas:

A static image displaying the Data Workflow component configuration using the Input, Formula, and Console operators.

Here's a peek at the key/value pairs in the DevTools Console:

Static image displaying the DevTools Console view of the Data Workflow Input and Formula operator's output.

Turning Your Inverted Data Into camelCase

Because you only want to apply the camelCase function to your value, you must separate the key/value pair. To do that, add an Object2Table operator to separate your objects into an indexed array. Then, you can apply another Formula operator and use the _.camelCase function on your object value. To track the results of this function, you'll connect another Console operator.

Here's how the Info windows look for your operators:

1. Object2Table operator:

Setting

Value

Category

Object2Table

Label

Convert to Array

Key Column Name

key

Value Column Name

value

2. Formula operator:

Setting

Value

Category

Formula Value

Label

Turn to camelCase

Formula/Expression

value=LODASH("camelCase",value)

3. Console operator:

Setting

Value

Category

Console

Label

Value to camelCase

Here's how the operators look on your Data Workflow canvas:

A static image displaying the Data Workflow component configuration with the Object2Table, second Formula operator, and second Console operator added.

And here's a peek at your indexed array using camelCase in the DevTools Console:

Static image displaying the data from the Invert Value to Key Console Data Workflow operator.

Inverting Your Data Object Values

Now that your object values are in camelCase, you must return them to their original form. To begin, you'll use a Table2Object operator to return your indexed array to an object. Next, you'll add another Formula operator with the _.invert function to convert your object value back into an object key.

Here's how the Info windows look for your operators:

1. Table2Object operator:

Setting

Value

Category

Input

Label

Convert to Object

Key Column Name

key

Value Column Name

value

2. Formula operator:

Setting

Value

Category

Formula Value

Label

Invert to Key

Formula/Expression

key=LODASH("invert",A)

3. Console operator:

Setting

Value

Category

Console

Label

Keys in camelCase

And here's how the operators look on your Data Workflow canvas:

A static image displaying the completed Data Workflow component configuration.

Here's a peek at your object keys using camelCase in the DevTools Console:

Static image displaying the data from the Keys in camelCase Console Data Workflow operator.

 

Overview

Sometimes, you might need to change your data objects to camelCase A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton.. To do that, you can use the _.invert and _.camelCase Lodash functions. This is especially helpful when building your applications since Unqork uses camelCase for object and Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. naming.

To read more about the _.invert and _.camelCase parameters, you can visit: https://lodash.com/docs/4.17.15.

How This Use Case Works

To turn your data into camelCase, you must first retrieve a data set. In this use case, you retrieve your data from a transform. The object keys of your data don't use camelCase. So, once you have your data in your module, your Data Workflow swaps the information in your object's key and value pairs. Then, your Data Workflow turns your inverted object values into camelCase. The last step inverts the key/value pairs again to their original order.

Here are the basic steps for how this use case works: 

1. Setup and execute transform input data.
2. Invert input data keys into object values.
3. Turn inverted values into camelCase.
4. Revert inverted values into object keys.

Here's how the completed module looks in the Module Builder:

A static image displaying the turn object keys into camelCase using Lodash use case in the module builder.

Setting Up Your Input Data

Creating Your Input Data

Before you can turn data into camelCase, you need a data set to make your alterations. For this use case, you'll set up a transform and call your transform data into your module. So, you'll open your Transforms tab on your Module Builder and add a new transform. Then, name your transform data and set the Direction of transform to Output and the Type of transform to Output NJK(JSON). In the Transform body, enter the following: 

Copy
{
    "first_name":"Joan",
    "last_name":"Jonas",
    "street-address":"123 Main St.",
    "favoriteColor":"Orange"
}

Here's how the data transform looks in the Transforms tab: 

A static image displaying the transform configuration for the use case.

Calling Your Data Into Your Module

Now that your transform is ready, you can call it into your module using a Plug-In component. But, before you configure your Plug-In, add a Hidden component to store your transform data and name it user. Then, add the Plug-In component and name it plugGetData.

For your Plug-In's Inputs table, enter the following: 

Property ID

Mapping

'Your Module ID'

moduleId

'Your Transform Name Here'

transformName

'The Field to Transform'

data

Next, you'll enter the user iconHidden component for your output for your Plug-In. Since you used a NJK(JSON) transform, your output Mapping is jsonData. Your transform exists on the same module as where you call it from, so you'll use the Internal ServiceService Type and set it to Execute Transform with Input Data.

Here's how this plugGetData Plug-In configuration looks: 

A static image displaying the Plug-In configuration for the turn object keys into camelCase using Lodash use case.

And here's how these components look in your Module Builder

A static image displaying the set object values with Lodash use case with the Plug-In and Hidden component added in the module builder.

Initiating Your Data Transformation

By now, your data is ready for retrieval, which you can do by adding an Initializer component. Name your Radio Button component icon Initializer component initOnLoad and, in the Trigger Type field, select New Submission. In the Outputs table Enter outputs components and actions you want the component to perform., enter your plugGetData Plug-In to trigger it.

Here's how these components look in your Module Builder

A static image displaying the set object values with Lodash use case with the Initializer, Plug-In, and Hidden components added in the module builder.

Inverting Your Data Object Keys

With your input data in your module, your first step is to swap the placement of your key/value pairs. To do that, add a Data Workflow component and name it dwfConvertToCamelCase. Your Data Workflow starts with an Input operator that retrieves your user iconHidden component's transform data. Then, add a Formula operator, which uses the _.invert Lodash function. This function swaps the key and value data in an object's key/value pair. To track the results of this inversion in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software., you'll connect a Console operator.

Before viewing the Console output in the DevTools Console, your dwfConvertToCamelCase Data Workflow Icon Data Workflow component also needs a trigger. In your plugGetData Plug-In component's Post-Trigger field, enter your Data Workflow's Property Name.

Here's how the Info windows for those operators look:

1. Input operator:

Setting

Value

Category

Input

Component

user

Required

Yes

Source

Default

2. Formula operator:

Setting

Value

Category

Formula Value

Label

Invert Value

Formula/Expression

value=LODASH("invert",A)

3. Console operator:

Setting

Value

Category

Console

Label

Invert Key to Value

And here's how they look on your Data Workflow canvas:

A static image displaying the Data Workflow component configuration using the Input, Formula, and Console operators.

And here's a peek at your key/value pairs in the DevTools Console:

Static image displaying the DevTools Console view of the Data Workflow Input and Formula operator's output.

Turning Your Inverted Data Into camelCase

Because you only want to apply your camelCase function to your value, you must first split them up. To do that, add an Object2Table operator which splits your objects into an indexed array. From here, you can apply another Formula operator to use the _.camelCase function on your object value. To track the results of this function, you'll connect another Console operator.

Here's how the Info windows for those operators look:

1. Object2Table operator:

Setting

Value

Category

Object2Table

Label

Convert to Array

Key Column Name

key

Value Column Name

value

2. Formula operator:

Setting

Value

Category

Formula Value

Label

Turn to camelCase

Formula/Expression

value=LODASH("camelCase",value)

3. Console operator:

Setting

Value

Category

Console

Label

Value to camelCase

Here's how they look on your Data Workflow canvas:

A static image displaying the Data Workflow component configuration with the Object2Table, second Formula operator, and second Console operator added.

And here's a peek at your indexed array using camelCase in the DevTools Console:

Static image displaying the data from the Invert Value to Key Console Data Workflow operator.

Inverting Your Data Object Values

Now that your object values are in camelCase, you must return them to their original position. To start, you'll use a Table2Object operator to return your indexed array to an object. Next, add another Formula operator to do another _.invert function to swap your object value back into an object key.

Here's how the Info windows for those operators look:

1. Table2Object operator:

Setting

Value

Category

Input

Label

Convert to Object

Key Column Name

key

Value Column Name

value

2. Formula operator:

Setting

Value

Category

Formula Value

Label

Invert to Key

Formula/Expression

key=LODASH("invert",A)

3. Console operator:

Setting

Value

Category

Console

Label

Keys in camelCase

And here's how they look on your Data Workflow canvas:

A static image displaying the completed Data Workflow component configuration.

And here's a peek at your object keys using camelCase in the DevTools Console:

Static image displaying the data from the Keys in camelCase Console Data Workflow operator.

Resources