Pass values from Apex Map to lightning-combobox in LWC

Question

I need to pass the values from an Apex class to my LWC combobox.

This is the apex code:

@AuraEnabled
    public static Map<String,Object> retrieveChannelSector(String accId, String userId){

        Map<String,Object> mapRet = new Map<String,Object>();
        Set<String> setSectors = new Set<String>();

        List<Sales_Structure__c> lstSS = [SELECT Distribution_Channel__c, Activity_Sector__c 
                                            FROM Sales_Structure__c 
                                            WHERE Account__c = :accId 
                                            AND (User__c = :userId 
                                            OR User_PLV__c = :userId)];

        Set<String> setChannels = new Set<String>();
        for(Sales_Structure__c ss : lstSS){
            setChannels.add(ss.Distribution_Channel__c);
        }
                                    
        for(String s : setChannels){
            for(Sales_Structure__c ss : lstSS){
                if(ss.Distribution_Channel__c == s){
                    setSectors.add(ss.Activity_Sector__c);
                }
            }
            mapRet.put(s, setSectors);
        }

        System.debug('mapRet channel/sector: ' + mapRet);        

        return mapRet;
    }

the LWC component JS:

@wire(retrieveChannelSector, { accId : '$recordId', userId : '$userId'})
    wiredretrieveChannelSector({ data, error }){
        if(data){           
            for (let key in data) {
                this.lstChannelSector = [...this.lstChannelSector, { sectors: data[key], channels: key }];
            }
            console.log('>>>GIU>>> this.lstChannelSector: ', this.lstChannelSector);
        }
        else if(error) {
            console.log(error)
        }
    }

the LWC component HTML:

<template for:each={lstChannelSector} for:item="keyValue">
                <tr key={keyValue.key}>
                    <th scope="col">
                        <div title={keyValue.channels}>Channels: {keyValue.channels}</div>
                    </th>
                </tr>
                <tr key={keyValue.label}>
                    <th scope="col">
                        <div title={keyValue.sectors}>Sectors: {keyValue.sectors}</div>
                    </th>
                </tr>
            </template>
            <template for:each={lstChannelSector} for:item="keyValue2">
                <div key={keyValue2.key} class="slds-m-vertical_medium">
                    <lightning-combobox
                    name="channelFixed"
                    label="Distribuition Channel"
                    value={keyValue2.channels}
                    options={keyValue2.channels}
                    onchange={handleChange}
                    required
                    ></lightning-combobox>
                </div>
            </template>

the console.log:

I can get the values with the first template, but I can't get it with the second template with combobox. What I'm doing wrong?

Thanks!!

Answer 1

You are passing in keyvalue2.channels to the options property on the combobox. This should be an array of values - probably sectors from what I can see of your data. Something like this:

<lightning-combobox
                name="channelFixed"
                label="Distribuition Channel"
                value={keyValue2.channels}
                options={keyValue2.sectors}
                onchange={handleChange}
                required
                >
</lightning-combobox>