1

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 ? – Mohith Shrivastava Feb 12 '16 at 2:46
  • 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. – MaxPaq Feb 12 '16 at 2:48
2

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. – MaxPaq Feb 12 '16 at 3:34
  • Can you explicitly say new variable ..I am off computer but this sounds interesting .. – Mohith Shrivastava Feb 12 '16 at 3:36
  • @MaxPaq Just updated the answer with proper results . – Mohith Shrivastava Feb 12 '16 at 5:47
  • 1
    Amazing Mohit, just tested your solution and it works! – MaxPaq Feb 12 '16 at 15:32
  • what is i in the for(i in spaceList){ – Sunrise487 Dec 30 '18 at 20:13
0

I have created the idea for the same .Please vote it so it would be implemented by Salesforce https://success.salesforce.com/ideaView?id=0873A000000EA7VQAW

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.