Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Vetriselvan ManoharanVetriselvan Manoharan 

LWC issue in binding the lightning combo box

I am using LWC in a screen flow. I get response from an API and need to bind that value in the lightning combo box. It's in the json array format. Here is the code. 
  
import { 
    LightningElement,
    track,
    wire,
    api
     
} from 'lwc';
import getCooridinatesFromPinCode from '@salesforce/apex/ChurchNearYouController.getCooridinatesFromPinCode';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

export default class ChurchNearYouComponent extends LightningElement {
    @api postalCode;
    @api selectedChurch;
    @track churchDropDown = [];
    @track value;
    
    @wire(getCooridinatesFromPinCode, { postalCode: '$postalCode'})
    wiredChurchList({ error, data }) {
        if (data) {
            console.log(data);
            this.churchDropDown = data;
        }
    }

    get churchList() {
        console.log('Get' + this.churchDropDown);
        return this.churchDropDown;
        /*return [
            { label: 'St James Piccadilly', value: '623055' },
            { label: 'St Anne Soho', value: '623058' },
            { label: 'St Paul Covent Garden', value: '623070' },
        ];*/

        //return [{"value":623055,"label":"St James Piccadilly"},{"value":623058,"label":"St Anne Soho"},{"value":623070,"label":"St Paul Covent Garden"},{"value":623065,"label":"St Martin-in-the-Fields"},{"value":823011,"label":"Guards Chapel of Wellington Barracks"}];
    }

    /*set churchList(val){
        console.log('Set' + val);
        this.churchDropDown = val;
    }*/
   

    handleChange(event) {
        const attributeChangeEvent = new FlowAttributeChangeEvent('selectedChurch', event.detail.value);
        this.dispatchEvent(attributeChangeEvent);
    }

}
<lightning-combobox name="ChurchListSource" 
                label="Church" value={value} placeholder="-Select-"
                options={churchList} onchange={handleChange}>
            </lightning-combobox>
            <lightning-formatted-text value={churchList} ></lightning-formatted-text>

If I hard code the json array and return then it binding the combo-box but when returing the churchDropDown it is not working as expected. I can see the response in the text value but not getting binded on the dropdown. 

Any help will be appreciated
Isaac AleixoIsaac Aleixo

I was facing the same problem, here was the solution i found to my problem:

 

On JS file:

@track pickListValues =[];
ConnectedCallback(){
         getPickListValues().then(result => {
                console.log('picklist' +JSON.stringify(result));
                for(let i=0; i < result.length ;i++)
                {
                    this.pickListValues = [...this.pickListValues,{ label: result[i], value: result[i] }]
                }
                console.log('values' + JSON.stringify(this.pickListValues));
            })
            .catch(error => {
                console.log('picklist deu errado.');
            });
}

On HTML:

<lightning-layout-item  flexibility="auto" padding="around-small" size="10">
                    <lightning-combobox class="slds-m-bottom_small" name="revisaoMonitoriaCombo" value={value} placeholder="Selecione a revisão de monitoria"
                    options={pickListValues} onchange={handleChange}></lightning-combobox>

The Apex Controller:

 @AuraEnabled
    public static List<String> getPickListValues(){
       List<String> pickListValuesList= new List<String>();
        Schema.DescribeFieldResult fieldResult = ObjectApiName.FieldName.getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        for( Schema.PicklistEntry pickListVal : ple){
            pickListValuesList.add(pickListVal.getLabel());
        }    
        return pickListValuesList;
    }