Working with Attribute Values in JavaScript

These common patterns are useful for working with attribute values in JavaScript.

component.get(String key) and component.set(String key, Object value) retrieves and assigns values associated with the specified key on the component. Keys are passed in as an expression, which represents an attribute value.

To retrieve an attribute value of a component reference, use component.find("cmpId").get("v.value").

Similarly, to set the attribute value of a component reference, use component.find("cmpId").set("v.value", myValue).

This example shows how you can retrieve and set attribute values on a component reference, represented by the button with an ID of button1.

1<aura:component>
2    <aura:attribute name="buttonLabel" type="String"/>
3    <lightning:button aura:id="button1" label="Button 1"/>
4    {!v.buttonLabel}
5    <lightning:button label="Get Label" onclick="{!c.getLabel}"/>
6</aura:component>

This controller action retrieves the label attribute value of a button in a component and sets its value on the buttonLabel attribute.

1({
2    getLabel : function(component, event, helper) {
3        var myLabel = component.find("button1").get("v.label");
4        component.set("v.buttonLabel", myLabel);
5    }
6})

In the following examples, cmp is a reference to a component in your JavaScript code.

To get the value of a component’s label attribute:

1var label = cmp.get("v.label");

Set an Attribute Value

To set the value of a component’s label attribute:

1cmp.set("v.label","This is a label");

Deep Set an Attribute Value

If an attribute has an object or collection type, such as Map, you can deep set properties in the attribute value using the dot notation for expressions. For example, this code sets a value for the firstName property in the user attribute.

1component.set("v.user.firstName", "Nina");

For deeply nested objects and attributes, continue adding dots to traverse the structure and access the nested values.

Let’s look at a component with a user attribute of type Map.

1<aura:component >
2        <aura:attribute name="user" type="Map"
3          default="{
4            'id': 99,
5            'firstName': 'Eunice',
6            'lastName': 'Gomez'}" />
7    
8    <p>First Name: {!v.user.firstName}</p>
9    
10    <lightning:button onclick="{!c.deepSet}" label="Deep Set" />
11</aura:component>

When you click the button in the component, you call the deepSet action in the client-side controller.

1({
2    deepSet : function(component, event, helper) {
3        console.log(component.get("v.user.firstName"));
4        component.set("v.user.firstName", "Nina");
5        console.log(component.get("v.user.firstName"));
6    }
7})

The component.set("v.user.firstName", "Nina") line sets a value for the firstName property in the user attribute.

Validate That an Attribute Value Is Defined

To determine if a component’s label attribute is defined:

1var isDefined = !$A.util.isUndefined(cmp.get("v.label"));

Validate That an Attribute Value Is Empty

To determine if a component’s label attribute is empty:

1var isEmpty = $A.util.isEmpty(cmp.get("v.label"));

See Also

Working with a Component Body in JavaScript