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() {

    dataRecieveFunc() {
        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?

1 Answer 1


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

Try something like that:

const results = {

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


// or

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


enter image description here


  • But in the child component, after trying what you said in the parent Im unable to iterate over the options. Is this wrong? var optionData = this.options ? (JSON.parse(JSON.stringify(this.options))) : null; Should I directly access the options in thechild without JSON.parse or JSON.Stringify
    – Amax1
    Commented Sep 27, 2022 at 7:40
  • What do you mean by "I'm unable to iterate over the options"? You should mark options as @api not @track if you want to pass it to the child. Commented Sep 27, 2022 at 7:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .