lightning:checkboxGroup: How to identify the name value of the selected record

Question

I have aura List attribute which has the values from the custom settings. I am trying to find the all the value of that list attribute by passing the Key value of the selected record. I am not sure how i can achieve this.

Controller

public with sharing class Inquiry_Todo_Controller {

    @AuraEnabled(cacheable=true)
    public static List<Inquiry_Todos__c> getInquiryTodos(String sRecId){
        System.debug('@@record ID:'+sRecId);
        Map<String,Inquiry_Todos__c> todoMap = new Map<String,Inquiry_Todos__c>();
        List<Inquiry_Todos__c> todoLst = new List<Inquiry_Todos__c>();
        String insType = [SELECT Insurance_Type__c FROM Inquiry__c WHERE Id =: sRecId].Insurance_Type__c;
        for (Inquiry_Todos__c setting : Inquiry_Todos__c.getAll().values()){
            if(setting.Insurance_Type__c == insType)
                todoLst.add(setting);
        }
        return todoLst;
    }

}

Component

<aura:component description="ToDoItem" implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName"
                controller="Inquiry_Todo_Controller">
    <aura:attribute name="options" type="List" />
    <aura:attribute name="value" type="List" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

    <div class="slds-box slds-theme_default">
        <span class="title slds-path__title" style="font-weight: bold;color:#FF9033;" >
            <lightning:icon iconName="standard:task" title="Inquiry TODO's" size="medium" alternativeText="To Do's"/>
            TO-DO
        </span>
        <lightning:checkboxGroup
                aura:id="todo"
                name="InqTODO"
                options="{! v.options }"
                value="{! v.value }"
                onchange="{!c.handleChange}"
                required="false" />
    </div>
</aura:component>

JS Controller

({

doInit: function(component,event,helper){
   helper.getTodoList(component);
},

handleChange: function(component,event,helper){
    console.log('@@@options:::'+component.get("v.options"));
    console.log('@@@options JSON:::'+JSON.stringify(component.get("v.options")));
    var selectedValue = component.find("todo").get("v.value");
    if(selectedValue.length != 0){
      var lastSelectedValue = selectedValue[selectedValue.length - 1];
      console.log('@@@lastSelectedValue@@@'+lastSelectedValue);
    }
  }
})

Helper

 ({
    getTodoList: function(component){
        var res;
        var action = component.get("c.getInquiryTodos");
        action.setParams({
            "sRecId" : component.get("v.recordId")
        });
        action.setCallback(this,function(response){
            console.log('response object::'+JSON.stringify(response.getReturnValue()));
            var state = response.getState();
            if(state == "SUCCESS"){
                 var res = response.getReturnValue();
                 var labels= [];
                 for(var key in res){
                   labels.push({ label: res[key].Todo_Value__c,
                                 value: res[key].Name });
                }
                component.set("v.options", labels);
            }
        });
        $A.enqueueAction(action);
    },

    createToDoTask: function(var1){
    }
})

Answer 1

To get all the selected values, we can use filter and find:

var allOptions = component.get("v.options");
var selected = component.get("v.value");
var selectedOptions = allOptions.filter(option => selected.find(value => value === option.value));

This should return a list of options that are selected.

From there, you can use map to transform the list as you'd like, such as just the label:

var selectedLabels = selectedOptions.map(option => option.label);