Getting a Proxy object instead of an actual component attribute

Question

I am getting a Proxy object instead of an actual component attribute. I saw the question and it did not help me.

Here is my code:

campingApp.app :

<aura:application >
    <c:camping/>
</aura:application>

camping.cmp :

<aura:component >
    <c:campingHeader/>
    <c:campingList/>
</aura:component>

campingHeader.cmp :

<aura:component >
    <h1>Camping List</h1>
</aura:component>

campingList.cmp :

<aura:component >
    <ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>
    <c:campingListItem/>
</aura:component>

campingListItem.cmp :

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{ 
                        'sobjectType': 'Camping_Item__c',
                        'campingItemName': 'SSSSSSSSSSSSSSSSS',
                        'price__c': 0,
                        'quantity__c': '555555',
                        'packed__c': false }"/>
    <p>{!v.item.campingItemName}</p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.price__c}" style="currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.quantity__c}"/>
    </p>
    <lightning:input type="toggle"                            
                         label="Packed: "                           
                         name="packed"                         
                         checked="{!v.item.packed__c}" />
    <lightning:button label="Packed!"
            onclick="{!c.packItem}"/>
</aura:component>

campingListItemController.js :

({
    packItem : function(component, event, helper) {
        console.log(component);
        var item = component.get("v.item");
        console.log("item.quantity__c: " + item.quantity__c);
        item.packed__c = true;
        console.log(item);
        component.set("v.item", item);

        var button = event.getSource();
        button.set("v.disabled", true);
        console.log(button);
    }
})

Here is the console after previewing the campingApp.app and the Packed! button being clicked:

My main purpose here is to set the item.packed__c to true and update all the places where it is used. I can do that with these lines:

item.packed__c = true;
component.set("v.item", item);

But before these lines I should have the components attribute named item in the item variable. I am trying to achieve this by the following line:

var item = component.get("v.item");

But as you can see instead of the item I am getting some weird Proxy object which really do not provide me any kind of access to the underlying item.

What am I doing wrong here?

Answer 1

The best solution I found for this is to do the following:

const objUncovered = JSON.parse(JSON.stringify(objWhichIsCoveredWithProxy));