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 article you'll learn how to turn key/value property names into camelCase using Lodash.

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: 

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: 

1
2
3
4
5
6
{
    "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: 

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:

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:

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:

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.