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.


    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 = {};
                    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();



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.

  • can you also how you want the benefits array to be constructed in javascript? – RedDevil Feb 17 '18 at 8:31
  • I want the benefits to appear separately , like splitted, so I may map them to markup component. Right now they appear together – Mahmood Feb 17 '18 at 8:38

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"]},
 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">
            {!item.key} //for products
                <aura:iteration items="{!item.benefits}" var="benefits">
                    {!benefits}//for benefits
| improve this answer | |
  • Nice but I have number of products being retrieved. And against each products multiple benefits are associated. – Mahmood Feb 17 '18 at 8:52
  • 1
    ok got it so you have product list and against each product multiple benefits are retrieved.can you also add the apex output from the server call to the question – RedDevil Feb 17 '18 at 8:57
  • It’s a simple apex method. That is returning products. I would have added the controller but on mobile now. – Mahmood Feb 17 '18 at 9:19
  • how do I iterate through each product? – Mahmood Feb 17 '18 at 15:42
  • updated answer with the same – RedDevil Feb 18 '18 at 17:41

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" 


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

    //After fetching from lightning AuraEnabled Controller
    var mulSelect = resp.Field__c.split(';');

SLDS Lightning Multiselect picklist

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

| improve this answer | |

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.