Use multiselect picklist values in lightning component

Question

I have a lightning component that is pulling data from Products (product2) and it has a custom field (Benefits__c) that is multi-select picklist. I need to display those multiselect values in component separately. Right now they are appear with ; (semicolon) between each value.

I have read How to use Split() function inside an Expression in lightning component but I could not follow it completely.

Component

@AuraEnabled
    public static List<Product2> returnProducts(string stateCode) {
        return [SELECT Id, Name, Plans_by_State_Description__c,  Grid_Sequence__c, Plans_by_State_Benefits__c
                 FROM Product2 
                 WHERE State__c =: stateCode];

    }

Below is my JS-Controller (I have tried some things but to no avail)

 var action = cmp.get("c.returnProducts");
        action.setParams({ stateCode : "WI" });
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = response.getReturnValue();
                //console.log(JSON.stringify(result) );

                var someMap = {};
                if(result){
                    for( var key in result ){
                        JSON.stringify(key + '>' + value);

                        if (key=="Benefits__c"){
                            someMap['Benefits1'] = value.split(';')[0];
                            someMap['Benefits2'] = value.split(';')[1];
                            someMap.push({key:key, key0: value.split(';')[0], key1:value.split(';')[1], value:output[key]});
                        }

                    }
                    //console.log(JSON.stringify(someMap) );
                    cmp.set("v.products", someMap);
                }   

      } else if (state === "ERROR") {
                var errors = response.getError();
                console.error(errors);
            }
        }));

        $A.enqueueAction(action); 

    }

I want to split the values of the multi-select and then map them in the markup. Not sure where to go from here now.

Answer 1

you would want to create a product list as your main attribute and it would an be an array of objects with each containing the product name as key and an array which would be your list of benefits

var ListProducts = [];

var listofbenefits = [];

For each product construct the benefits list like below

var benefitsString = result['Benefits__c'];

var listbenefits = benefitsString.split(';');


var eachproductinfo = {key:productname,benefits:listbenefits};//constructing each product info with benefit list

ListProducts.push(eachproduct);//creating the main list

Once you have this you can assign this to a list attribute in your markup. in your markup you can have 2 aura:iteration one for products and then inner one for benefits to display the benefits associated to each product.

For illustration lets say you product list is like below:

 var productlist = [{key:"ProdA",benefits:["benefit1","benefit2","benefit3"]},
                       {key:"ProdB",benefits:["benefit4","benefit5","benefit6"]},
                       {key:"ProdC",benefits:["benefit7","benefit8","benefit9"]}];
 component.set('v.listOfproducts', productlist);

the way you would iterate the same in markup would be:

<aura:attribute name="listOfproducts" type="List" />

  <aura:iteration items="{!v.listOfproducts}" var="item">
           <div>
            {!item.key} //for products
                <aura:iteration items="{!item.benefits}" var="benefits">
                    <div>
                    {!benefits}//for benefits
                    </div>
               </aura:iteration>    
          </div>      
        </aura:iteration>

Answer 2

I recently stumbled upon lightning:dualListbox which allows you to replicate the functionality of multi-select picklist in lightning.

And its working is simple, you just create an Array with lable-value pair for picklist values and pass it to the component and voila, its done.

Similarly, you can bind it to any fields multi-select value using value attribute of dualListBox.

<aura:application extends="force:slds">

<aura:attribute name="ListOfOption" type="Object[]" default="[{'label':'A','value':'A'},{'label':'B','value':'B'},{'label':'C','value':'C'}]"></aura:attribute>
<aura:attribute name="defaultOptions" type="List" />



<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>


<lightning:dualListbox aura:id="selectOptions" name="Select Options"  label="Select Options" 
                       sourceLabel="Available Options" 
                       selectedLabel="Selected Options" 
                       options="{!v.ListOfOption}" 
                       value="{!v.defaultOptions}"

                       />

({
doInit : function(component, event, helper) {
    console.log('Init fired');

    //After fetching from lightning AuraEnabled Controller
    var mulSelect = resp.Field__c.split(';');
    component.set("v.defaultOptions",mulSelect);
}
})

Src: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_dualListbox.htm