LWC - Async/Await but value hasn't returned

Question

I have 2 picklists. When the first picklist get clicked, it will captured the value and pass to the second picklist.

Right now, I'm using async/await and also try to call it imperative but it did not work

Apex controller:

    @AuraEnabled(cacheable=true)
    public static Map<String,String> getPicklistTypeFields(String strObjectName) {
        Map<String, Schema.SObjectType> detail = Schema.getGlobalDescribe();
        Map<String,String> mapOfPicklistTypeFields = new  Map<String,String>();
        for(Schema.SObjectField fields :detail.get(strObjectName).getDescribe().fields.getMap().Values()) {
            If(fields.getDescribe().getType() == Schema.DisplayType.PICKLIST) { 
                mapOfPicklistTypeFields.put(fields.getDescribe().getLabel(), fields.getDescribe().getName());
            }
        }
        return mapOfPicklistTypeFields;
    }
    
    @AuraEnabled(cacheable = true)
    public static Map<String,String> getValueForSelectedPicklistField(string strObjectName, string selectedField){
        try {
            System.debug('Object Name '+strObjectName);
            System.debug('Selected Field '+selectedField);
            Map<String,String> options = new  Map<String,String>(); 
            Map<String, Schema.SObjectField> mapFields = Schema.getGlobalDescribe().get(strObjectName).getDescribe().fields.getMap();
            Schema.DescribeFieldResult pickFieldResult = mapFields.get(selectedField).getDescribe();   
            List<Schema.PicklistEntry> picklistFields1 = pickFieldResult.getPicklistValues();
                for( Schema.PicklistEntry pickListFields2 : picklistFields1)
                {
                    options.put(pickListFields2.getLabel(),pickListFields2.getValue());
                }       
            return options;
        } catch (Exception e) {
            return null;
        }
    }

HTML code:

<div class="slds-card">
        <lightning-combobox name="fieldList" label="Group By" onchange={getPicklistFieldsOptions} options={lstOfPicklistFields} placeholder="Select Field"></lightning-combobox>
    </div>
    <div class="slds-card">
        <lightning-combobox name="fieldList" label='Available values' options={objectFieldOptionsList} placeholder="Select Field"></lightning-combobox>
    </div>

JS code:

fieldSelectedToGetPicklistTypeField = '';
    getPicklistFieldsOptions(event) { 
        this.fieldSelectedToGetPicklistTypeField = event.detail.value;
        console.log('Value'+ this.fieldSelectedToGetPicklistTypeField);
        this.getPicklistValuesForSelectedPicklistField();
    }
    
    @track objectFieldOptionsList = [];
    async getPicklistValuesForSelectedPicklistField() {
        await getValueForSelectedPicklistField({ strObjectName: '$objectApiName', selectedField: this.fieldSelectedToGetPicklistTypeField })
        .then((result) => {
          if (result) {
              this.objectFieldOptionsList = [];
            for (let key in result) {
                this.objectFieldOptionsList.push({ label: key, value: result[key] });
            }
             
          } 
        }).catch((error) => {
          console.log('Error in getting pickist values')
        })
    }

Thank you so much!

Answer 1

It is because of how you are passing in the input parameter to your apex class. You cannot use the '$objectApiName' inside a function. I will edit this post to be more detailed

for the code below, I am assuming you have @api objectApiName, at the top of your JS somewhere.

JS

fieldSelectedToGetPicklistTypeField = '';
    getPicklistFieldsOptions(event) { 
        this.fieldSelectedToGetPicklistTypeField = event.detail.value;
        console.log('Value'+ this.fieldSelectedToGetPicklistTypeField);
        this.getPicklistValuesForSelectedPicklistField();
    }
    
    @track objectFieldOptionsList = [];
    async getPicklistValuesForSelectedPicklistField() {
        await getValueForSelectedPicklistField({ strObjectName: this.objectApiName, selectedField: this.fieldSelectedToGetPicklistTypeField })
        .then((result) => {
          if (result) {
              this.objectFieldOptionsList = [];
            for (let key in result) {
                this.objectFieldOptionsList.push({ label: key, value: result[key] });
            }
             
          } 
        }).catch((error) => {
          console.log('Error in getting pickist values')
        })
    }

Answer 2

You shouldn't be using the async/await options this way. When you call a method with await, the result is returned to the caller, not asynchronously.

For example, your picklist values would be retrieved this way using await:

const result = await myAsyncMethod();

You don't need this, however. You can keep your code and remove the async and await keywords and do the resolving asynchronously (as your code is apparently ready to do).