How to set dynamic default values in lightning dual list box

Question

I want to set dynamic default values in lightning dual list box

Lwc code

eFile.html

<lightning-dual-listbox name="Select Fields to display"
        label="Select Fields to display"
        source-label="Available"
        selected-label="Selected"
        field-level-help="Select fields which you want display in the list view"
        options={options}
        value ={defaultValues}
        onchange={handleSelectFieldToDisplay}></lightning-dual-listbox>

eFile.js

         @track defaultValues =[];
         fetch_Select_Fields_To_Display({
         ListViewId : 'a0J4F000006bWUeUAM'
         }).then(data=>{
        if(data)
        {

        for(let key in data)
        {
            const values = data[key];
            this.defaultValues= [...this.defaultValues,values];

        }
    console.log('Previously Selected fields-'+JSON.stringify(this.defaultValues));

        }

Apex code

@AuraEnabled
 public static Map<String,String> fetchSelectFieldsToDisplay(String 
     ListViewId)
    {
    System.debug('List view Id'+ListViewId);
    List<String> selectFieldsToDisplay = new List<String>();
    Map<String,String> selectFields = new Map<String,String>();

    String fieldApiName ;
    String displayFields = null;
    List<CustListView__c> selectedFields =[Select Selected_Fields_To_Display__c from CustListView__c where Id =:ListViewId ];
    if(selectedFields.size() > 0)
    {
        displayFields = selectedFields[0].Selected_Fields_To_Display__c;  
    }    

    if(displayFields != null)
    {
        selectFieldsToDisplay    = displayFields.split(';');
    }
    System.debug('Fields'+selectFieldsToDisplay);
    Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
    Schema.SObjectType leadSchema = schemaMap.get('Case');
    Map<String, Schema.SObjectField> fieldMap = leadSchema.getDescribe().fields.getMap(); 

    for(String fieldLabel : selectFieldsToDisplay)
    {
        System.debug('field one by one'+fieldLabel);
        for (SObjectField fieldName: fieldMap.values())         
        {
            DescribeFieldresult fieldDesc = fieldName.getDescribe();

            String fA = fieldDesc.getName();
            String fl = fieldDesc.getlabel();
            if(fieldLabel == fl )
            {

                fieldApiName =  fA;
                System.debug('Field API Name = '+fieldApiName);
                if(fieldApiName.contains('PropertyCase__c'))
                {
                    fieldApiName = 'PropertyCase__r.Name';
                }
                selectFields.put(fieldLabel,fieldApiName);

            }
        }

    }
    System.debug('Select fields - '+selectFields);
    return selectFields;
}

but in selected values i am not getting the default values

    when i checked the  console logs i am getting the default values

   Previously Selected fields-["Application_Type__c","Household__c","CaseNumber"]

Answer 1

I created a playground that demonstrates setting values.

One thing: your options list must be a list of [ { key, value }, ... ], so you need to transform your data:

this.options = Object.keys(data).map(key => ({ key: key, value: data[key] }));
this.defaultValues = Object.keys(data);