+ Start a Discussion
Pradeep BandarpalliPradeep Bandarpalli 

Custom javascript objects are not getting implemented on component when Locker Service is Enabled.

HI,
I have a simple requirement, get a list of custom object records from client side controller and display it on the page. Below is my code

I have a wrapper object created and used in the component attribute as type.

Wrapper Class:
public class DemoWrpClass {
    
    @AuraEnabled 
    public String compName;
    
    @AuraEnabled
    public String compType;
    
    public DemoWrpClass() {
    }
    
}

Component:
<aura:component >
    <aura:attribute name="items" type="DemoWrpClass[]" />
    
    <ui:button label="Press" press="{!c.onPress}" />
    
    <aura:iteration items="{!v.items}" var="item">
        <p>{!item.compName}</p>
        <p>{!item.compType}</p>
        <br />
    </aura:iteration>
    
</aura:component>

Controller:
({
    onPress : function(component) {
        var items = [];
        for(var i=0;i<5;i++){
            var item = [];
            item.compName = "Name"+i;
            item.compType = "Type"+i;
            items.push(item);
        }
        component.set("v.items", items);
    }
})

I am the getting the result when Locker Service is disabled, below is the image
Expected Output
But when the Locker service is enabled I am not getting any output, result is blank. Through Lightning CLI I got to know the error is Invalid SecureWindow API, now I dont understand how to implement SecureWindow in my code here. I want the expected output when Locker service is enabled. Please help. Thanks in advance.
Mohith Kumar ShrivastavaMohith Kumar Shrivastava

Hi Pradeep,


With locker you need to be really careful with Data Types .I modified your code like below

({
    onPress : function(component) {
        var items = [];
        for(var i=0;i<5;i++){
            var item = {}; // WATCH HERE I CHANGED THIS TO USE A VARIABLE THAN AN ARRAY
            item.compName = "Name"+i;
            item.compType = "Type"+i;
            items.push(item);
        }
        component.set("v.items", items);
    }
})