Lodash Use Case: Setting Object Values

Overview

When using Unqork, you might want to create or change the values of an object. To do that, you can use the _.create and _.set Lodash functions.

TIP  To read more about the parameters of the _.create and _.set Lodash functions, visit: https://lodash.com/docs/4.17.15.

What You’ll Learn

In this article, you’ll learn how to create objects and set object values using Lodash functions.

How This Use Case Works

For this use case, you'll use the _.create and _.set Lodash functions to create and alter your object path and value. First, you create an object using the _.create function. Next, you'll use end-user input to alter the key/value of your object. To do that, you'll use the _.set function to set the path, or key, and value of your created object. Then, your module outputs the new key/value for the end-user to see.

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

1. Your Calculator component creates a new object.
2. The end-user enters their key and value to hard code onto the object.
3. Your object's key/value gets hardcoded with the end-user's input.
4. The new object values display to the end-user.

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

Here’s how the use case looks in Express View:

What You'll Need

This use case uses: 

  • 1 Initializer component

  • 2 Calculator components

  • 2 Text Field components

  • 1 Hidden Component

  • 1 Content component

  • 1 Button component

Creating an Object with Lodash

Your first step is to create an object with the _.create function. For this example, you'll create your object by hard coding the value of a Hidden component. Start by adding a Hidden component to your module. Then, add Initializer and Calculator components. Your Initializer triggers your calcCreateCompany Calculator. Then, your Calculator hard codes an object value to your company Hidden component. In the Calculator's Outputs table, enter your Hidden component for the Property ID. Then, enter the _.create function in Unqork syntax. Your Formula looks like this: =LODASH("create","object"). When hard coding values, a function's parameters are in double-quotes. So, to assign the object value to your Hidden component, use the "object" parameter.

Here's how your calcCreateCompany Calculator looks: 

And, here's how these 3 components look in your module

Assigning Value Paths with Lodash

Now that you have your object value hardcoded to a Hidden component, you can alter its key/value. As mentioned, you'll do this with end-user input and the _.set Lodash function.

For end-user input, use one Text Field to collect your Key and another for your Value. Then, you'll add another Calculator. This calcSetKeyValue Calculator uses your object and your Text Fields as its Inputs.

Your calcSetKeyValue Outputs table looks similar to your calcCreateCompany Calculator. You'll enter your Hidden component for the Property ID and your Lodash function for the Formula. The _.set Lodash function takes the object, path, and value parameters. So, you'll use your Hidden component for your object parameter and your end-user's input for your key and value. Your Lodash function looks like this in Unqork syntax: =LODASH("set",company,key,value).

Here's how your calcSetKeyValue Calculator looks: 

And, here's how these components look in your module

Displaying Value Paths with Lodash

Now, the only thing left to do is show the results to your end-user. To do that, add your Button and Content components.

First, configure your Button to trigger your calcSetKeyValue Calculator component. Then, use a Content component to show the results. Since your Hidden component is in object form, you can reference it by entering {{data.company}} in your Content component.

Let's see your module in action. In Express View, enter the Key and Value you want to set to your object. Then, click the Button to initiate the change. Your entries display in the content area below your Button.

Lab

You can view this completed use case here: https://training.unqork.io/#/form/60e4778ece0ab62fd5879bee/edit.