Lightning Component use value from array to set field

  • In a lightning component, I am trying to use the values in 1 array to set the values for a field in a second array. But for whatever reason I always end up with the last value of my array as the field value.

    Here is the component:

    <aura:attribute name="spaceTypeList" type="string[]" default="Conference/Focus Room,Copy Area,Kitchenette,Loading Dock,Electrical Room,Exterior Building,Janitorial Closet,Mothers Room,Office Area,Parking Garage,Restrooms/Locker Rooms,Stairs/Elevators,Carpet Spots/Vacuuming/Flooring,Lobbies/Corridors"/>
    <aura:attribute name="detailRecord" type="Inspection_Area_Detail__c" 
                        default="{'Inspection_Area__c':'',
                                 'Space_Subset__c':'',
                                 'Rating__c':'0',
                                 }"/>
    <aura:attribute name="detailList" type="Inspection_Area_Detail__c[]"/>
    
    <ui:button label="loop test" press="{!c.loop}"/>
    
    <aura:iteration items="{!v.detailList}" var="det">
        <p> Space {!det.Space_Subset__c}</p>
    </aura:iteration>
    

    And here is the controller:

    ({
        loop: function(component, event, helper) {
    
            var spaceList = component.get("v.spaceTypeList");
            var detail = component.get("v.detailRecord");
            var List =component.get("v.detailList");
            var List2 =component.get("v.testList");
            for(i in spaceList){
                var space =spaceList[i];
                detail.Space_Subset__c = space;
                console.log("detail space subset "+detail.Space_Subset__c);
                List.push(detail);
                List2.push(detail.Space_Subset__c);
            }
            component.set("v.detailList",List);
            component.set("v.testList",List2);
        },
    })
    

    Thank you for your help.

    where have you declared testList ?

    Sorry testList was not supposed to make it to stackexchange. It is currently just an array , just wanted to see if I could populate a second array from the loop in the controller.

  • Analysed the root cause of this issue .Since lightning is two way binded with UI ,the new values are always equal to the present instance of attribute.

    Lets try and understand with more console log statements

    With your original code

    <aura:component >
    <aura:attribute name="spaceTypeList" type="string[]" default="Conference/Focus Room,Copy Area,Kitchenette,Loading Dock,Electrical Room,Exterior Building,Janitorial Closet,Mothers Room,Office Area,Parking Garage,Restrooms/Locker Rooms,Stairs/Elevators,Carpet Spots/Vacuuming/Flooring,Lobbies/Corridors"/>
    <aura:attribute name="detailRecord" type="Account" 
                 default="{ 'sobjectType': 'Account','Name': ''}"/>
    <aura:attribute name="acclst" type="Account[]"/>
    
    <ui:button label="loop test" press="{!c.loop}"/>
    
    <aura:iteration items="{!v.acclst}" var="acc">
       <p> Space {!acc.Name}</p>
     </aura:iteration>
    </aura:component>
    

    JS client side

    ({
    loop : function(component, event, helper) {
        var spaceList = component.get("v.spaceTypeList");
        var detail = component.get("v.detailRecord");
        var newlst =[];
        for(i in spaceList){
            console.log(i);
            var space = spaceList[i];
            var detailtemp = {};
            detailtemp = detail;
            detailtemp.Name = space;
            console.log("detail space subset "+detailtemp.Name);
            newlst.push(detailtemp);
            console.log("value after iteration"+i+JSON.stringify(newlst));
        }
        component.set("v.acclst",newlst);
    },
    })
    

    The results are as below

    enter image description here

    enter image description here

    The primary culprit is this line below

    detailtemp = detail;

    In short it picks latest value of attribute everytime.

    Now we understand this more ,lets not use the value from the attribute instead decouple the variable

    JS code

     ({
       loop : function(component, event, helper) {
        var spaceList = component.get("v.spaceTypeList");
        //var detail = component.get("v.detailRecord");lets not use this guy..He is doing mischief
        var newlst =[];
        for(i in spaceList){
            console.log(i);
            var space = spaceList[i];
            var detailtemp = {};
            detailtemp = { 'sobjectType': 'Account','Name': ''};
            detailtemp.Name = space;
            console.log("detail space subset "+detailtemp.Name);
            newlst.push(detailtemp);
            console.log("value after iteration"+i+JSON.stringify(newlst));
        }
        component.set("v.acclst",newlst);
       },
     })
    

    The results now as expected

    enter image description here

    Thanks Mohith, but sadly the issue persist. Your logic is sound, I just don't understand why it does not work.

    Can you explicitly say new variable ..I am off computer but this sounds interesting ..

    @MaxPaq Just updated the answer with proper results .

    Amazing Mohit, just tested your solution and it works!

    what is i in the `for(i in spaceList){`

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM