[SalesForce] How to assign aura:attribute for objects with default value null

This must be a a very simple question, but may be I'm doing it wrong.

I wanted to set default aura:attribute value to null on lightning component as below.

e.g.

<aura:attribute name="selectedObj" type="Object" default="null"/>

but this gives me selectedValue as a String, and not comparing with null in lightning javascript controller/helper code.

let selectedObj = component.get('v.selectedObj');

console.log('selectedObj: '+(selectedObj===null) +' string comparison: '+(selectedObj==='null'));
component.set('v.selectedObj', null);
console.log('selectedObj: '+(component.get('v.selectedObj')==null)+' string comparison: '+(component.get('v.selectedObj')=='null'));

Result:

selectedObj: false string comparison: true 
selectedObj: true string comparison: false

Therefore I had to set null value explicitly in javascript controller at the initialization.
e.g.

component.set('v.selectedObj', null);

Is this the correct approach to set null in javascript? are there any better alternatives to set default null value for aura:attribute?

Cheers!

Best Answer

Don't define a default attribute. This causes the attribute to default to null.

Eg

<aura:attribute name="selectedObj" type="Object" />

Related Solutions

[SalesForce] lightning:select – Set default value based on sObject List from apex controller

Setting the options doesn't actually cause the rendering to happen. So, the value you're setting is ignored because it isn't valid at the time. The solution is to use another callback post-rendering. Here's an example app I wrote that demonstrates this:

<aura:application extends="force:slds" controller="LightningAccountController">
    <aura:attribute name="accounts" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <lightning:select label="Choose 1" name="a_opt" aura:id="a_opt" onchange="{!c.change}">
        <aura:iteration items="{!v.accounts}" var="account">
            <option value="{!account.Id}">{!account.Name}</option>
        </aura:iteration>
    </lightning:select>
</aura:application>

// Controller
({
    doInit: function(component, event, helper) {
        // Request from server
        var action = component.get("c.getAccountList");
        action.setCallback(this, function(result){
            var accounts = result.getReturnValue();
            console.log(accounts);
            component.set("v.accounts", accounts);
            // Let DOM state catch up.
            window.setTimeout(
                $A.getCallback( function() {
                    // Now set our preferred value
                    component.find("a_opt").set("v.value", accounts[4].Id);
                }));
        });
        $A.enqueueAction(action);
    }
})

// Apex class
global class LightningAccountController {
    @AuraEnabled global static Account[] getAccountList() {
        return [SELECT Name FROM Account LIMIT 10];
    }
}

[SalesForce] Setting an attribute’s default value to another attribute seems to link their references.

the way you are passing it its called a bound expression "{!v.placeholder}". Whenever the value of the attribute changes it will change in all the places its referred as well.

If you only want to pass the default value the first time then use a # like "{#v.placeholder}".

This link from lightning components bookshelf explains both in detail.

Related Topic