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).

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>

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"));