Handling blank values in lightning component

Question

Below is my lightning component bundle and apex controller code. A record may have blank values in SLA__c field. Purpose of this component is to update this field.

Apex Controller:

public with sharing class AccountListController {
    @AuraEnabled
    public static List<Account> getAccountList() {
        return [SELECT Id,Name,SLA__c FROM Account];
    }
}

Component Markup:

<aura:component controller="AccountListController">
    <aura:attribute name="accounts" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <h2>Account Details</h2>

        <ul class="list-group">
            <li class="list-group-item">
                <div class="form-inline">            
                    <aura:iteration items="{!v.accounts}" var="account">
                       <ui:inputText value="{!account.SLA__c}" required="true"/>
                        <button type="button" class="btn btn-primary mr-2" onclick="{!c.myAction}">Update</button>

                    </aura:iteration>  
                </div>
            </li>   
    </ul>   
</aura:component>

JS Controller:

({
    init : function(component, event, helper) {
        console.log('in init');
        var action = component.get("c.getAccountList");
        action.setCallback(this, function(response) {
           var state = response.getState();
            if (component.isValid() && state === 'SUCCESS') {
                console.log('resp-'+response.getReturnValue());
                component.set("v.accounts", response.getReturnValue());
            }
        });

        $A.enqueueAction(action);
    },

    myAction : function(component, event, helper) {
        var accounts = component.get('v.accounts');
        for(var i=0; i<accounts.length;i++)
        console.log('@@@-'+accounts[i].SLA__c);
        /*account.Name = 'New Name';
        account.isSelected = false;
        component.set('v.account', account);
        console.log(account);*/
    }   
})

Problem:

Scenario-1 - When a user updates blank SLA__c field on a record to some value and clicks on update button, in my JS controller action method updated value is not received for that record. In console it always displays undefined.

Scenario-2 - If a record already has some value in SLA__c field and user updates it to a new value then new values is received in the JS controller action method.

Has anyone encountered the same problem? How to solve it?

Answer 1

I had the similar issue with ui:inputCheckbox, the workaround I did is to iterate over the records and set the default value to false.

For your case, iterate over the account records and set a default value to SLA__c on records with no value for SLA__c and create a new instance of the array by doing JSON.stringify and JSON.parse respectively.

if (component.isValid() && state === 'SUCCESS') {
    var accounts = response.getReturnValue();
    accounts.map(function(acc){
        if(!acc.SLA__c){
            acc.SLA__c = '';
        }
    })
    component.set("v.accounts", JSON.parse(JSON.stringify(accounts)));
}