[SalesForce] Lightning combobox not showing values

Below is my code I have combobox values in my activityOptions but my combobox does not displays anything. Please help me with this issue.

.js

// Complete activity
    for (let v of this.activity) {
        this.complete_activity.push(v.option);
        this.dropDown["Complete Activity?"] = this.complete_activity;
        
       // console.log('this.complete_activity : '+this.complete_activity);
    }
    this.activityOptions = [{label : this.complete_activity, value : this.complete_activity}];
        console.log('this.activityOptions : '+JSON.stringify(this.activityOptions));

.html

<template>
    <lightning-card>
        Hello
        <lightning-combobox name="SelectOption" label="Complete Activity?" 
        options={activityOptions} 
           required>
        </lightning-combobox>
    </lightning-card>
</template>

Best Answer

As stated in the documentation:

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.

So activityOptions must be an array of object with two string properties: label and value.

[
    { label: 'Not Started Yet', value: 'Not Started Yet' },
    { label: 'Started', value: 'Started' },
    { label: 'Complete', value: 'Complete' }
]

Instead, as shown by the console.log, you created and array with a single element whose label and value properties are arrays:

[
    {
        label: [ 'Not Started Yet', 'Started', 'Complete' ],
        value: [ 'Not Started Yet', 'Started', 'Complete' ]
    }
]

In order to fix it, you should modify your for-loop:

// Complete activity
const comboboxOptions = [];
for (const v of this.activity) {
    this.complete_activity.push(v.option);
    this.dropDown["Complete Activity?"] = this.complete_activity;
    
   // console.log('this.complete_activity : '+this.complete_activity);
   
   comboboxOptions.push({ label: v.option, value: v.option });
}
this.activityOptions = comboboxOptions;
console.log('this.activityOptions: ', this.activityOptions);

Please note that special characters must be escaped. I.E. if you want to display "Hello World" the label should be label: '\"Hello World\"'.

Related Solutions

[SalesForce] Option to select none in picklist fields lightning-combobox – LWC

This cannot be achieved through wired property. You should be using wired function as below:

@track value = '';
@track StatePicklistValues;
@wire(getPicklistValues, {
    recordTypeId: '$objectInfo.data.defaultRecordTypeId',
    fieldApiName: STATE_FIELD
})
getStatePicklistValues(result) {
    if (result.data) {
        console.log(JSON.stringify(result.data));
        this.StatePicklistValues = [ { label: 'Select State', value: '', selected: true }, ...result.data.values ];
    } else if (result.error) {
        alert('ERROR');
    }
}

For sorting, you can do custom sort as follows while assigning:

...result.data.values.sort(function(a, b){return // custom logic});

Note: You should remove placeholder from combobox

[SalesForce] Pick List values added dynamically in Java Script are not reflecting in Lightning:combobox LWC

Push won't show the new changes to a @track attribute. You need to actually assign a new value to the @track attribute. Here is a demo I wrote for you.

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track optionList = [{label:'-- none --',value:''}];
    @track value;
    newValue;
    newLabel;
    setNewValue(event) {
        this.newValue = event.target.value;
    }
    setNewLabel(event) {
        this.newLabel = event.target.value;
    }
    addNewOption() {
        this.optionList = [...this.optionList, {label: this.newLabel+'', value: this.newValue+''}];
        this.newValue = '';
        this.newLabel = '';
        if(this.optionList.length===1) {
            this.value = this.optionList[0].value;
        }
    }
}

<template>
    <lightning-input
        label="New Value"
        name="new-value"
        onchange={setNewValue}>
    </lightning-input>
    <lightning-input
        label="New Label"
        name="new-label"
        onchange={setNewLabel}>
    </lightning-input>
    <lightning-button label="Add" onclick={addNewOption}>
    </lightning-button>
    <hr></hr>
    <lightning-combobox 
        label="Choose One"
        name="options"
        placeholder="Choose One"
        options={optionList}
        value={value}>
    </lightning-combobox>
</template>

Here, we use the spread syntax to copy the array (...this.optionList) and add the new element. This allows us to trip the @track decorator and allow the UI to update.

Best Answer

Related Solutions

[SalesForce] Option to select none in picklist fields lightning-combobox – LWC

[SalesForce] Pick List values added dynamically in Java Script are not reflecting in Lightning:combobox LWC

Related Topic