Lightning - Adding List of records in controller and show on component

Question

Basically i am trying to create an app showing all the Wine bottles avaialble in the SFDC database. In parent component - I am showing some other details like country etc. Once user makes a selection, I am showing List wine bottles in a child component based on the Chosen country.

<!-- PARENT COMPONENT -->
<aura:attribute name="listOfItmesInCart" type="Wine_Cart__c[]" />
<aura:handler name="addWineCartEVT" event="c:addWineCartEvent" action="{!c.cathMyAddCartEvent}"/>
< -- USER SELECTS SOME COUNTRY --> 
<C: CHILD COMPONENT WILL BE CALLED AND I AM SHOWING RELATED DETAILS(WINES) IN CHILD COMPONENT. >
<aura:iteration items="{!v.listOfItmesInCart}" var="ws"> 
{!ws.Name__c} -- HERE IS THE PROBLEM
</aura:iteration>`

And event

<aura:event type="COMPONENT" description="Event template">
<aura:attribute name="cartItem" type="Wine_Cart__c" />

In Child Component AS I SAID,I am showing list of Records. upon Clicking some i want to pass the detail back to my parent. That i am doing by COMPONENT Events which is working fine.

    <!-- CHILD COMPONENT -->

List of wine records based on the chosen country will be here in this component. upon clicking , in my ChildCompController.js i am doing the following.

<!-- CHILD COMPONENT CONRTOLLER.js -->

handleMenuSelect :     
function(component,event,helper){
//I am getitng the reference of the clicked record ( say ID, Name) and passing to Parent.
var cmpEvent = component.getEvent("addWineCartEVT");
cmpEvent.setParams({"cartItem":component.get("v.clikedObject")});
    cmpEvent.fire();
 }

every time user click some record from child, an event will be fired and the data is being received properly in Parent comp's controller. However i am trying to add those details to a list so that i can show the clicked records on Parent object. But i am failing here. Please suggest me if you have any idea or different approaches to do this.

<!-- in my PARENT COMPONENT CONTROLLER.js --> 
         cathMyAddCartEvent : function(component,event,helper){
                var wineCartAtt1 = event.getParam('cartItem');                
                var feedbacks = component.get("v.listOfItmesInCart");
                feedbacks.push(wineCartAtt1);  // Here I am pushing all the object details passed back from child to parent via event.
                var listCart = component.get("v.listOfItmesInCart");        
                console.log('listCart>> '+JSON.stringify(listCart));
                for (var i = 0; i < listCart.length; i++) {
                    NOW HOW DO KEEP ADDING OBJECTS A SINGLE LIST AND EVERY TIME A NEW SELECTION IS MADE SO THAT  I CAN SHOW IT ON THE PARENT OBJECT.
        }  

What i am trying to achive here is showing the list of Line items added in the controller.js methods. Please help if any one has any other approaches for showing list of selected records.

Answer 1

First of all I see no need to split your component. Your task would be easier if you had put everything in the parent component.

To keep a persitent list of selected bottles, you need to store it somehow - regardless of one or two components. Therefore I would use another attribute (in the parent component)

<aura:attribute name="selectedIds"  type="string[]" default="[]"> 

Now if you stick with the child component make sure the parent is receiving the event. In that handler you could do somthing like

var selectedIds = component.get("v.selectedIds"); // get the attribute into a local variable
selectedIds.push( newIdFromChild ); 
component.set("v.selectedIds",selectedIds); // store the extened array back to the attribute

I think in your code you have only one attribute (the one with all bottles) and you need a second and I can't see a component.set() - so your selection gets lost.

If you merge the components this could be in a simple onclick handler of the bottles. But the concept is the same:

Store your list in an SECOND attribute.

Instead of only storing a list of Ids you could also store the full object. Then you need to change the type of the attribute to Wine_Cart__c[] - can't tell which approach would fit better.