Multiselect picklist right section not getting prepopulated values using lightning component

Question

Created Quick action and attached that lightning component with this Quick action. Alert message showing the result which is coming from the controller soql but right section is showing empty.

public class ShoppingController {

@AuraEnabled
public static List<OnlineMarket__c> olRecordId(String recordId){
    List<OnlineMarket__c> pList = new List<OnlineMarket__c>();
    if(recordId != null){
        pList = [Select Shop_Product__c From OnlineMarket__c Where ID =: recordId Limit 1];
    }
    return pList;
 }
}

---

---

<aura:component controller="ShoppingController" 
                implements="flexipage:availableForAllPageTypes,
                flexipage:availableForRecordHome,
                force:hasRecordId,force:lightningQuickAction" access="global" >


<aura:attribute name="ListOfOption" type="Object[]" default="[{'label':'Amazon','value':'Amazon'},
                                                             {'label':'Flipkart','value':'FlipKart'},
                                                            {'label':'Myntra','value':'Myntra'}]">
</aura:attribute>


<aura:attribute name="defaultOptions" type="List" />
<aura:attribute name="defaultOptions" type="List" />
<aura:attribute name="recordId" type="String"/>

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

<lightning:dualListbox aura:id="selectOptions" name="Shopping Site"  label="Shopping Site" 
                   sourceLabel="Available data" 
                   selectedLabel="Chosen data" 
                   options="{!v.ListOfOption}" 
                   value="{!v.defaultOptions}"

                   />

</aura:component>

---

---

  ({
    doInit : function(component, event, helper) {
    var action = component.get('c.olRecordId');
    action.setParams({ recordId : component.get("v.recordId") });
    
    action.setCallback(this, function(response) {
        alert(JSON.stringify(response.getReturnValue()));
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.defaultOptions",response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
  },
})

Answer 1

The values attribute takes a list of string values as input but in your code, the value returned is JSON representation of an sObject. You will need to process the response and take out the value of Shop_Product__c from each record.

if (state === 'SUCCESS') {
  let values = response.getReturnValue().map(item => {
    return item.Shop_Product__c;
  });
  component.set('v.defaultOptions', values);
}