+ Start a Discussion
Chuck H.Chuck H. 

Nested Lightning component not updating when JS object (iteration/Array) changes

I'll preface by saying this is working in other locations, where it is not nested. I have a component (cmp A) nested in a lightning:accordionSection, the component contains a  <aura:attribute name="oppContacts" type="Object[]"/> that is displayed in an aura:iteration. My Controller.js has the following code that allows users to 'clone' the js objects (on save, all objects are inserted in SFDC as Custom_Objects via apex):
    cloneThis : function(component, event, helper){
         console.log(event);
        var cloneObj = {}; 
        cloneObj = Object.assign({}, event.getSource().get("v.name"));
        //cloneObj = event.getSource().get("v.name");

        console.log(cloneObj.role); //test
        var optionsArr = component.get("v.oppContacts");
        console.log(optionsArr);
        optionsArr.push(cloneObj);
        
        //set new clone ref priority to none...doesn't help
        //optionsArr[optionsArr.length-1].priority = 'NONE';
        component.set("v.oppContacts", optionsArr);
        console.log(document.getElementById("cW").innerHTML);
        document.getElementById("cW").innerHTML = document.getElementById("cW").innerHTML;
        console.log('set html!!!');
        
        
        //var bottomMarker = document.getElementById("bottomMarker");
        //bottomMarker.scrollIntoView();
    }

The issue I'm having is that the iteration on the page does not update. I believe this is because of how it's nested, but not sure. Hoping to learn the best way to handle this...maybe rerender.js but again, not sure.

I do log the array after the clone, and it does grow. I can also debug in the cmp as {!v.oppContacts.length} and the length does increase by one with each button push. Button is setup as follows:
<lightning:button name="{!contact}" aura:id="{!contact.name}" value="{!contact.name}" variant="brand" label="Clone" onclick="{!c.cloneThis}" />



An odd behavior I noticed was that if I put two of the same "cmp A"'s on the page, clicking my 'doClone' button in one cmp would rerender the other as expected.

I don't want to add to confusion with a wall of code. I think I have the relevant bits. I pretty sure I'm close because this works on other pages, outside of being nested.

I'll lastly add that I'm a newer developer. Open to any input: general approach, specific, js, etc. Circling back for formatting asap.
Best Answer chosen by Chuck H.
Chuck H.Chuck H.
Part of me posted here, knowing I'd find the solution soon after. Here's how I fixed this if anyone else comes across this post.
The change was to my lines 8-10 above, here's the new code:
 
// Instead of this declaration/population....
var optionsArr = component.get("v.oppContacts");
optionsArr.push(cloneObj);


// I'm now doing this:
var optionsArr = {}; //* this is the magic
optionsArr = component.get("v.oppContacts");
optionsArr.push(cloneObj);


// so now the new method looks like this:
var cloneObj = {}; 
cloneObj = Object.assign({}, event.getSource().get("v.name"));
var optionsArr = {};
        
optionsArr = component.get("v.oppContacts");
optionsArr.push(cloneObj);

component.set("v.oppContacts", {}); //for good measure
component.set("v.oppContacts", optionsArr);
Kudos goes here: https://salesforce.stackexchange.com/questions/108925/lightning-rerender-child-components-in-auraiterable-after-parent-attribute-ch

All Answers

Chuck H.Chuck H.
I've removed the following js code, it was only added during some debugging I was attempting...
console.log(document.getElementById("cW").innerHTML);
document.getElementById("cW").innerHTML = document.getElementById("cW").innerHTML;
console.log('set html!!!');

//has all been re-removed...didn't intend to paste that, it didn't work either :D
Chuck H.Chuck H.
Part of me posted here, knowing I'd find the solution soon after. Here's how I fixed this if anyone else comes across this post.
The change was to my lines 8-10 above, here's the new code:
 
// Instead of this declaration/population....
var optionsArr = component.get("v.oppContacts");
optionsArr.push(cloneObj);


// I'm now doing this:
var optionsArr = {}; //* this is the magic
optionsArr = component.get("v.oppContacts");
optionsArr.push(cloneObj);


// so now the new method looks like this:
var cloneObj = {}; 
cloneObj = Object.assign({}, event.getSource().get("v.name"));
var optionsArr = {};
        
optionsArr = component.get("v.oppContacts");
optionsArr.push(cloneObj);

component.set("v.oppContacts", {}); //for good measure
component.set("v.oppContacts", optionsArr);
Kudos goes here: https://salesforce.stackexchange.com/questions/108925/lightning-rerender-child-components-in-auraiterable-after-parent-attribute-ch
This was selected as the best answer
Omkar Kumar 16Omkar Kumar 16
Thanks for posting the solution. It is a saviour. I almost gave up after over 12 hours of head banging.
Omkar Kumar 16Omkar Kumar 16
Is this issue opened with Salesforce ? If not, they probably not be knowing about it.