1

I have a dynamic checkbox generator which is bound by city on the account which works fine all cities are rendered with a corresponding checkbox. When I select the checkbox a city is added to a list selection.

What I want to achieve is when a checkbox is selected to show all the records related to the city of that particular checkbox. When I select another checkbox the records related to this city should be added to the list. I currently have the following:

Component

    <aura:attribute name="selectedvalues" type="string" />
<aura:attribute name="SelectedCity" type="List[]" />
<aura:attribute name="CheckboxValue" type="Boolean" default="false" />
<aura:attribute name="myBool" type="Boolean" default="false"/>

<aura:attribute name="selectedCities" type="Account[]" default="[]" description="All accounts" />

<div class="container">       
    <div>
        <div style="background-color: #7f7e8a;height: 20px;"></div>       
        <aura:iteration var="a" items="{!v.allaccounts}" indexVar="indx">
            <ui:inputCheckbox aura:id="checkbox" 
                              text="{!a.account}"
                              name="{!indx}"
                              label="{!a.BillingCity}" 
                              change="{!c.selectoptionvalue}"
                              class="myCheckbox"/><br/>  
        </aura:iteration> 

Javascript

selectoptionvalue: function(component, event, helper) {
    var selected = [], checkboxes = component.find("checkbox");
    if(!checkboxes) {   // Find returns zero values when there's no items
        checkboxes = [];
    } else if(!checkboxes.length) { 
        checkboxes = [checkboxes];
    }
    checkboxes
    .filter(checkbox => checkbox.get("v.value"))    // Get only checked boxes
    .forEach(checkbox => selected.push(checkbox.get("v.label")));   // And get the labels
    component.set("v.selectedCities", selected);    // Set to display
} 

I tried

 component.set("v.SelectedCity",
    component.get("v.accountsSel").filter(account => account.selected));

Instead of

component.set("v.selectedCities", selected); 

This does not render the accounts

Update I tried applying the suggested solution as follows:

checkboxes
        .filter(checkbox => checkbox.get("v.value"))    // Get only checked boxes
        .forEach(checkbox => selected.push(checkbox.get("v.label")));   // And get the labels
        component.set("v.selectedCities", selected);    // Set to display

        console.log('v.selectedCities:'+  selected);
        console.log('v.component.get("c.getAllAccounts"):'+ component.get("c.getAllAccounts"));

        console.log('filteredAccounts '+ filteredAccounts);
        var filteredAccounts = component.get("c.getAllAccounts").filter(account => selectedCities.indexOf(account.BillingCity) > -1);
        console.log('filteredAccounts '+ filteredAccounts);

Running a debug came up with:

v.selectedCities:Burlington

v.component.get("c.getAllAccounts"):SecureAction: [object Object]{ key: {"namespace":"c"} }

filteredAccounts undefined

It seems like the filtered accounts returns empty which I don't get as selectedCities does return a selection.

2

You can filter the list of accounts using an array:

    var filteredAccounts = component.get("v.allAccounts")
        .filter(account => selectedCities.indexOf(account.BillingCity) > -1);
  • So how do I apply this in javascript: checkboxes .filter(checkbox => checkbox.get("v.value")) // Get only checked boxes .forEach(checkbox => selected.push(checkbox.get("v.label"))); // And get the labels component.set("v.selectedCities", selected); // Set to display var filteredAccounts = component.get("v.allAccounts").filter(account => selectedCities.indexOf(account.BillingCity) > -1); trows an error: Cannot read property 'filter' of undefined – Thomas Jan 30 '18 at 3:47
  • @Thomas That's a null-pointer error. You need to make sure you're using the correct names. Did you go through the trailhead I recommended for you? – sfdcfox Jan 30 '18 at 3:49
  • Yes i did, am new to javascript so in javascript I dont know how to fill selectedCities.indexOf – Thomas Jan 30 '18 at 3:52
  • @Thomas Look at the code I wrote. It's a full, working, copy-paste example for you to work from. – sfdcfox Jan 30 '18 at 4:02
  • Okay thx I think ill have to look further in the javascript part as when paste you code it gives me:Cannot read property 'filter' of undefined] and I dont see yet how to define or fit in the selectedCities. I woudl think his would have to be v.selectedCities..indexOf But thanks for so far. – Thomas Jan 30 '18 at 4:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.