How to set field on record returned from server?

Question

I'm trying to set the 'Rating' field on an account record using the client-side controller. The account record has been returned from the server. Here's my approach.

Application:

<aura:application controller="SetFieldTestCtlr">
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <!--type=Object does not fix the problem-->
    <aura:attribute type="Account" name="acc"/>
    acc.Name: {!v.acc.Name}<br/>
    acc.Rating: {!v.acc.Rating}
</aura:application>

Client-side Controller:

({
    init : function(cmp, event, helper) {
        console.log('init');
        var action = cmp.get('c.getAcc');
        action.setCallback(this, function(response) {
            var acc = response.getReturnValue();
            acc.Rating = 'Hot';
            cmp.set('v.acc', acc);
        });
        $A.enqueueAction(action);
    }
})

Server-side controller:

public class SetFieldTestCtlr {
    @AuraEnabled
    public static Account getAcc() {
        return [SELECT Name FROM Account WHERE Id = '0015000001CQpNiAAL'];
    }
}

The result is that the 'Result' property value is not rendered:

What I've tried so far:

• Using a getter & setter for the 'Rating' property (doesn't work)
• Querying the 'Rating' field on the server-side controller (this DOES work if the Rating field is non-null)
• Setting the 'acc' attribute's type to 'Object' (doesn't work)
• Setting other properties on the acc object (none of these work)

Answer 1

You cannot set new properties on a record returned from the server or retrieved using cmp.get('v.[attributeName]'). The workaround is to make a copy of the object that you want to set a new property on.

<aura:attribute 
                type="Account" 
                name="acc"
 />

Your ControllerJS would be:

({
    init : function(cmp, event, helper) {
        console.log('init');
        var action = cmp.get('c.getAcc');
        action.setCallback(this, function(response) {
            // You cannot set a new property on an object returned from the server
            var acc = response.getReturnValue();

            // You can set a new property on a copy
            var accT = JSON.stringify(JSON.parse(acc));

            accT.Rating = 'Hot T';
            cmp.set('v.acc', accT);
        });
        $A.enqueueAction(action);
    }
})

Answer 2

Your code will work without issue, if locker service is disabled.

If the locker is in place, you could solve it by setting aura:attribute's type to Map(for now)

  <aura:attribute type="Map" name="acc"/>

But still this would be an workaround only.