[SalesForce] How to add selected Ids to a List in lightning component

I have a simple lightning component which has few fields using from Account object like Name,Phone,Website etc…and with checkbox.

shown here:
enter image description here

What I want to do is that when the user check the Checkbox I want to add to a list and display the id. Here is what I have done so far, I'm getting the correct Id when I click on the checkbox but its not adding to the list ({!v.ids}).

//defining the aura attribute:

<aura:attribute name="ids" type="List" />
Selected Ids: {!v.ids}

//handler: 

<aura:handler name="accountSelectedtEvent" event="c:accountSelectedtEvent" action="{!c.handleCheckAccounts}"></aura:handler>

//controller:

handleCheckAccounts: function(component, event, helper){

        var isSelected = event.getParam("selected");  
        var my_ids = [];
        var mySelectedId;

        if (isSelected){
            mySelectedId = event.getParam("id");  
            my_ids.push(mySelectedId);
        }
        component.set("v.ids", my_ids);
        console.log('-->ids---' + my_ids);            
    }

//component event:

<aura:event type="COMPONENT" description="Event template" >
    <aura:attribute name="selected" type="Boolean"></aura:attribute>
    <aura:attribute name="id" type="String"></aura:attribute>
</aura:event>

Best Answer

So without having tested this solution, I would say you should be able to just push the value onto the current list that you have. What I did not see in your current controller was where you were using that List you specified in your attributes, only that you declared a new Array, and then added a single value and reset the selected Id from the current event to it. My suggestion would be to replace your new Array instance with the current List param, and push the newly checked instance to your Array. Then the value would be there when you call component.set( "v.ids", my_ids );. I do believe that you should consider also handling deselecting a value from your array too. 

handleCheckAccounts: function(component, event, helper){

    var isSelected = event.getParam("selected");  
    var my_ids = component.get( "v.ids" ); // Get the current list from the controller
    var mySelectedId;

    if (isSelected){
        mySelectedId = event.getParam("id");  
        my_ids.push(mySelectedId); // add the index to this list
    }
    component.set("v.ids", my_ids); // display the change
    console.log('-->ids---' + my_ids);            
}
Related Topic