Unable to get Map as return value from Apex in LWC using Imperative Call

Question

Im making an imperative call from My JS to Apex as follows

import { LightningElement,track,api } from 'lwc';
import genericOptionsFetcher from '@salesforce/apex/MultiPicklistCls.genericOptionsFetcher';

export default class multiPicklist extends LightningElement {

@api objectName = 'Account';
@api fieldName = 'Industry';
@track options =[];
connectedCallback() {
        this.dataRecieveFunc();
    }

    dataRecieveFunc() {
        //console.log('Hiiiii');
        genericOptionsFetcher({objectApiName:this.objectName, fieldApiName: this.fieldName})
        .then(result =>{
            for(let i in result){
                 console.log('Result is' +result);
                //this.options = [...this.options,{label:i, value:result[i]}];
                //this.options.push({label: i,value: result[i]});
            }
        }).catch(error =>{
            this.error = error;
            this.options = undefined;
        })
    }

This is my Apex Class

public with sharing class MultiPicklistCls {

    @AuraEnabled(cacheable = true)
    public static Map<String, String> genericOptionsFetcher(String objectApiName, String fieldApiName){
        String[] values = new String[]{};
        Map<String, String> labelValueMap = new Map<String, String>();
        String[] types = new String[]{objectApiName};
        Schema.DescribeSobjectResult[] results = Schema.describeSObjects(types);
        for(Schema.DescribeSobjectResult res : results) {
            for (Schema.PicklistEntry entry : res.fields.getMap().get(fieldApiName).getDescribe().getPicklistValues()) {
                if (entry.isActive()) {labelValueMap.put(entry.getLabel(), entry.getValue());}
            }
        }
        System.debug('Values are'+ labelValueMap);
        return labelValueMap;
    }
}

The weird part is Im successfully getting the output value in System.debug in developer console as follows

Values are{Agriculture=Agriculture, Apparel=Apparel, Banking=Banking, Biotechnology=Biotechnology, Chemicals=Chemicals, Communications=Communications, Construction=Construction, Consulting=Consulting, Education=Education, Electronics=Electronics, ...}

Now I am setting the returned result in options array as follows

  this.options.push({label: i,value: result[i]});

Now I am passing this options to a child component as follows

 <c-multi-select-pick-list multi-select="true" onselectoption={handleSelectOptionList} options={options} selected-value={selectedValue} label="multiSelect Pick List"></c-multi-select-pick-list>

In the connectedCallBack in JS (of child component) I am accessing the options as

   var optionData = this.options ? (JSON.parse(JSON.stringify(this.options))) : null;

Then I am accessing the options to iterate in the template but the items are not displaying. Am I doing something wrong here? Do I not need to do a JSON.parse and JSON.stringify in the child component?

Answer 1

The problem is that you iterate through the map in the wrong way.

Try something like that:

const results = {
  Agriculture:'Agriculture', 
  Apparel:'Apparel', 
  Banking:'Banking', 
  Biotechnology:'Biotechnology'
};

const options = Object.keys(results).map(key => ({
    label: key, 
    value: results[key]
}));

console.log(options);

// or

const options = Object.entries(results).map(([key, value]) => ({
    label: key, 
    value: value
}));

console.log(options);

Reference:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries