Use Case: Turn Object Keys Into camelCase Using Lodash
Overview
Sometimes, you might need to change your data objects to camelCase. To do that, you can use the _.invert and _.camelCase Lodash functions. This is especially helpful when building your applications. That's because Unqork uses camelCase for object and Property ID naming.
TIP To read more about the _.invert and _.camelCase parameters, you can visit: https://lodash.com/docs/4.17.15.
What You’ll Learn
In this
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 Editor:
What You'll Need
This use case uses:
-
1 Initializer component
-
1 Plug-In component
-
1 Hidden component
-
1 Data Workflow component
The Data Workflow in this use case uses:
-
1 Input operator
-
3 Formula operators
-
1 Object2Table operator
-
1 Table2Object operator
-
3 Console operators
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 Editor and add a new transform. Then, name your transform data and set the Type to Output NJK(JSON). In the transform body, enter the following:
{
"first_name":"Joan",
"last_name":"Jonas",
"street-address":"123 Main St.",
"favoriteColor":"Orange"
}
Here's how the data transform looks in the Transforms tab:
Calling Your Data Into Your Module
Now that your transform is ready, you can call it into your module. You'll use a Plug-In component for that. But, before you configure your Plug-In, add a Hidden component to store your data.
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 Hidden 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, your Service Type is an Internal Service. You'll set your Internal Service to Execute Transform with Input Data.
Here's how this Plug-In configuration looks:
And here's how these components look in your module:
Initiating Your Data Transformation
By now, your data is ready for retrieval. But, to begin the process you'll add an Initializer component. Your Initializer triggers your Plug-In using the New Submission Trigger Type.
Your Data Workflow component also needs a trigger. To do that, enter your Data Workflow's Property Name in your Plug-In's Post-Trigger field.
Here's how these components look in your module:
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 your Data Workflow component. Your Data Workflow starts with an Input operator that retrieves your user 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, you'll connect a Console operator.
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:
And here's a peek at your key/value pairs in the DevTools Console:
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. This operator 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:
And here's a peek at your indexed array using camelCase in the DevTools Console:
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. This swaps 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:
And here's a peek at your object keys using camelCase in the DevTools Console:
Lab
You can view this completed use case here: https://training.unqork.io/#/form/60e7330e5d7dce02f49f41ca/edit.