How to add more data an array of objects in a lightning component

Question

The Issue I am having is that I have a component (A) with an array of objects. That is being displayed on the dom.

Then I have another component (B) that fires an event to add an object to the array in component (A).

Component (A) handles the event and it adds the object to the array but the dom does not change, Unless i refresh the page.

let objectA = componet.get("v.objectA");  // Array of objects

objectA.push({ 
  name: 'test',
  id: 1234
});

$A.get('e.force:refreshView').fire();

I inspected the data and ObjectA has the object. Is there a way to dynamically show the data in the dom.

This is what my dom is doing. Looping through the objects in the array

  <aura:iteration items="{!v.objectA}" indexVar="actionIndex" var="obj">
     <c:componentA recordId="{#v.recordId}" actionIndex="{!actionIndex}" object="{!obj}" />
  </aura:iteration>

Answer 1

It's not very clear that component A and component B are at same level or component B is child of component A. Here I have considered component A as parent component and component B is its child.

// controller.js
({
  doInit: function(component, event, helper) {
    helper.populateObjectList(component, event);
  },

  handleClick: function(component, event, helper) {
    helper.augmentObject(component, event);
  }
})

// helper.js
({
  populateObjectList: function(component, event) {
    var objs = [];
    objs.push(this.createObj('iPhone', 34000));
    objs.push(this.createObj('Motox', 27000));
    objs.push(this.createObj('Oneplus', 33033));
    component.set('v.objs', objs);
  },

  createObj: function(product, price) {
    var obj = new Object();
    obj.product = product;
    obj.price = price;
    return obj;
  },

  augmentObject: function(component, event) {
    var objs = component.get('v.objs');
    objs.push(this.createObj('Demo', 1000));
    component.set('v.objs', objs);
  }
})

<!-- lightning component -->
<!-- component A -->
<aura:component>
  <aura:attribute name="objs" type="Object[]" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <table>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
    <aura:iteration items="{!v.objs}" var="obj">
      <tr>
        <td>{!obj.product}</td>
        <td>{!obj.price}</td>
      </tr>
    </aura:iteration>
  </table>
  <!-- component B -->
  <lightning:button variant="brand" label="Add another" title="Brand action" onclick="{! c.handleClick }" />
</aura:component>

In this case lightning:button is considered as child component. onclick event of this button adds another object to the list of object iterated by parent component A. It's not needed to refresh the component to see the augmented list.

Answer 2

The issue that was happening is that I wasnt reassigning the lightning attribute

let objectA = componet.get("v.objectA");  // Array of objects

objectA.push({ 
  name: 'test',
  id: 1234
    });

component.set("v.objectA", objectA));

Answer 3

Use this code snippet when getting values from the server

var state = response.getState();
if (state === 'SUCCESS'){
                
  var result = response.getReturnValue()
  var objs = [];
  var i;
  for (i = 0; i < result.length; i++) {
      objs.push(this.createObj(result[i][0], result[i][1]));
  }//next
  cmp.set("v.objs", objs);
                
}//endif state


createObj: function(theId, theName) {
    var obj = new Object();
    obj.Id = theId;
    obj.Name = theName;
    return obj;
},