How to convert string with comma-separated values to lwc picklist

Question

I am a beginner in LWC, hence please pardon for any mistakes, and would appreciate suggestions to improve. I am trying to create an LWC picklist (lightning-combobox) with options that are basically comma separated values in a Contact text field. Also, this component needs to run in the community. I also tried using getFieldValue and getFieldDisplayValue, but nothing worked. Thanks!

Contact.Test_Field__c = abc,def,ghi

Expected Output: LWC Picklist

• abc
• def
• ghi

HTML

 <template>
        <lightning-card>
             <lightning-combobox name="progress" label="Status" value={value} 
                   placeholder="Select Progress" options={options} onchange={handleChange}> 
             </lightning-combobox>
      </lightning-card>
    </template>

JS

import {LightningElement, wire, } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import CONTACT_ID_FIELD from "@salesforce/schema/User.ContactId";

    const FIELDS = [ 
    'Contact.Test_Field__c'];

    export default class lwcTest extends LightningElement {

       @wire(getRecord, { recordId:  CONTACT_ID_FIELD , fields: FIELDS })
       contact;

       //need help in this block to convert array of strings to picklist values
       get options() { 
           return this.contact.data.fields.Test_Field__c.value.split(',');
       }
        
       handleChange() {}

}

Answer 1

The first issue is here: @wire(getRecord, { recordId: CONTACT_ID_FIELD , fields: FIELDS })
You're passing the name of a field to recordId attribute, while it must be a valid id. There are few examples in the getRecord documentation.
Due to such issue contact.data is undefined, so having a getter that try to read it, leads to an exception with a message like: "cannot read property of undefined ..."

Retrieving user Id is easy since LWC provides you with an appropriate module: @salesforce/user.
You only need to import it: import USER_ID from '@salesforce/user/Id';

Finally to convert comma separed values to a list of valid lightning-combobox options, you should know what attributes a picklist option must have. The documentation is clear about it (emphasis mine):

In your JavaScript, define an array of options. Each option corresponds to a list item on the dropdown list. Define the content of each option by specifying a value property and a label property. The label value is displayed for the item in the rendered dropdown list, while the value property's value is stored when the item is selected

Since split() returns an array so you can leverage the map() method which:

creates a new array populated with the results of calling a provided function on every element in the calling array.

I.E.

const options = csv.split(',').map((elem) => {
    const option = {
        label: elem,
        value: elem
    };
    return option;
};

So the LWC would look like:

import {LightningElement, wire, } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import CONTACT_TEST_FIELD from '@salesforce/schema/User.Contact.Test_Field__c';
import USER_ID from '@salesforce/user/Id';

export default class lwcTest extends LightningElement {

    userId = USER_ID;
    options = [];
    
    @wire(getRecord, { recordId:  '$userId' , fields: [CONTACT_TEST_FIELD] })
    fetchContact({ data, error }) {
        if (data) {
            const picklistValues = getFieldValue(data, CONTACT_TEST_FIELD);
            if (picklistValues) {
                this.options = picklistValues.split(',').map((elem) => {
                    const option = {
                        label: elem,
                        value: elem
                    };
                    return option;
                });
            }
        } else if (error) {
            // handle the error
        }
    }

    handleChange() {}
}

Answer 2

<template>
        <lightning-card>
             <lightning-combobox name="progress" label="Status" value={value} 
                   placeholder="Select Progress" options={options} onchange={handleChange}> 
             </lightning-combobox>
      </lightning-card>
    </template>

import {LightningElement, wire, } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import CONTACT_ID_FIELD from "@salesforce/schema/User.ContactId";

    const FIELDS = ['Contact.Test_Field__c'];

    export default class lwcTest extends LightningElement {

       @wire(getRecord, { recordId:  CONTACT_ID_FIELD , fields: FIELDS })
       contact;

       //need help in this block to convert array of strings to picklist values
       get options() { 
           //☟ the key is options will be object contains label and value.
           return this.contact.data.fields.Test_Field__c.value.split(',').map(el => {label: el, value: el});
       }
        
       handleChange() {}

}