Need help in filtering the records in lightning application

Question

I am very new to salesforce Lightning application development. I am looking for some help from you in creating a functionality in the lightning app. I have loaded all the accounts into the lightning component and I need to filter the records using the BillingCity by clicking the Billing city name. Once the billing city is clicked, all the accounts related to that city should be displayed and the filter can be cleared by clicking on the clear filter image (here I used a black circle) which loads all the records except the particular criteria.

Please help !!!

Aura Application

<aura:application extends="force:slds">
    <c:AccountMainScreen/>
</aura:application>

AccountMainScreen.cmp

<aura:component controller="AccountController">
    <aura:attribute name="allaccounts" type="List" description="All Products" />
    <aura:handler name="init" value="{!this}" action="{!c.fillAccount}"/>
    <div class="container">
        <div style="font-weight: bold;">Filter by Billing City</div><br/>
        <div>Bangalore</div><br/>
        <div>Mountain View</div><br/>
        <div>Singapore</div><br/>
        <div>
        <div style="background-color: #7f7e8a;height: 20px;"></div>    
        <aura:iteration items="{!v.allaccounts}" var="account">
            <article class="slds-card">
            <div class="slds-card__header slds-grid">
             <header class="slds-media slds-media--center slds-has-flexi-truncate">
              <div class="slds-media__body slds-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">{!account.Name}</span>
          </a>
        </h2>
      </div>
    </header>
  </div>
  <div class="slds-card__body">{!account.BillingCity}</div>

</article>
        </aura:iteration>
        </div>

    </div>   

</aura:component>

AccountController.apxc

public class AccountController {

    @AuraEnabled
    public static List<Account> getAllAccounts()
    {

        List<Account> lstacc=[select Name,BillingCity from Account where BillingCity != null];
        return lstacc;

    }

}

AccountMainScreenController.js

 ({     fillAccount : function(component, event, helper) {
        helper.getAccountsfromSF(component, event)  } })

AccountMainScreenHelper.js

({
    getAccountsfromSF : function(component, event) {

        var action = component.get('c.getAllAccounts');
        action.setCallback(this,function(actionResult){
        component.set('v.allaccounts', actionResult.getReturnValue());           
        });
        $A.enqueueAction(action);    

    }
})

Answer 1

This will help to you

Component:

    <aura:iteration var="a" items="{!v.AccountList}" indexVar="indx">
        <ui:inputCheckbox aura:id="pick" text="{!a.BillingCity}" name="{!indx}" label="{!a.BillingCity}" change="{!c.selectoptionvalue}"/>
    </aura:iteration>

<aura:iteration items="{!v.selectedvalues}" var="account">
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media--center slds-has-flexi-truncate">
                <div class="slds-media__body slds-truncate">
                    <h2>
                        <a href="javascript:void(0);" class="slds-text-link--reset">
                            <span class="slds-text-heading--small">{!account.Name}</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body">{!account.BillingCity}</div>

    </article>
</aura:iteration>

Controller:

({

initmethod : function(component,event,helper){
    var action = component.get("c.getAccountList");
    action.setCallback(this,function(a){
        var state=a.getState();
        if(state == "SUCCESS"){
            component.set("v.AccountList",a.getReturnValue());
        }

    });
    $A.enqueueAction(action);
},

selectoptionvalue :function(component,event,helper){
    var temp=component.get("v.selectedvalues");
    var selectedcity=component.get("v.SelectedCity");
    var accountdetails = component.get("v.AccountList");
     temp = [];//empty when while changing Picklist value
    if(event.getSource().get("v.value")){
        selectedcity.push({'ids':event.getSource().get("v.name"),'name':event.getSource().get("v.text"),'value':event.getSource().get("v.value")});
    }
    if(event.getSource().get("v.value") == false){
        for(var j=0;j<selectedcity.length;j++){
            if(selectedcity[j].ids == event.getSource().get("v.name")){
                var index = j;
            }
        }
         selectedcity.splice(index,1);
     }
      component.set("v.SelectedCity",selectedcity);      
    var accountdetails = component.get("v.AccountList");        
    for(var i=0;i<accountdetails.length;i++){
        for(var k=0;k<selectedcity.length;k++){
            if(accountdetails[i].BillingCity == selectedcity[k].name){
                temp.push(accountdetails[i]);
            }
        }
    }

    component.set("v.selectedvalues",temp);
}

})

Apex:

public class valuesget {
    @AuraEnabled
    public static List<Account> getAccountList(){
        return [Select Id,Name,BillingCity  From Account where BillingCity != null];
    }
}