Apex Code Development You need to sign in to do that
Don't have an account?
Ashish PWPAdmin LWC combobox not showing selected value
I have just started learning LWC and trying to display a picklist of Account Names in a LWC ComboBox and the selected value should be displayed on the Placeholder and on a text line below the placeholder.
The issue is I am seeing the dropdown values but the selected value is not being displayed on the placeholder and not even on the text line below it. What am i doing wrong.
Below is my code
JS Code
import { LightningElement, track, wire } from 'lwc';
import getAccList from '@salesforce/apex/test_LWCWireDemo.getAccList';
export default class Test_comboboxDemo extends LightningElement {
@track value = ""
@track accoption = [];
get options(){
return this.accoption;
}
connectedCallback(){
getAccList()
.then(result => {
let arr = [];
for(var i=0;i<result.length;i++){
arr.push({value :result[i].Name, label :result[i].ID});
}
this.accoption = arr;
})
.catch(error => {
console.log("error occurred");
})
}
handleChange(event){
this.value = event.detail.value;
}
}
HTML
<template>
<lightning-card title="Combo Box Demo">
<lightning-combobox label="Account Status"
value={value}
placeholder="Select Account"
options={options}
onchange={handleChange}>
</lightning-combobox>
<p>Select Value is: {value}</p>
</lightning-card>
</template>
Apex Class
public class test_LWCWireDemo {
@AuraEnabled
public static List<Account> getAccList(){
List<Account> accList = [Select ID, Name from Account];
return accList;
}
}
In your Js file, when pushing the values into the array, you have set the account ID as the label and account name as the value. The account ID should be the value as it is unique and the account name should be the label as it is what you want to display.
Please try using below code for js file:
import { LightningElement, track } from 'lwc'; import getAccList from '@salesforce/apex/test_LWCWireDemo.getAccList'; export default class Test_comboboxDemo extends LightningElement { @track value = ''; @track accoption = []; get options(){ return this.accoption; } connectedCallback(){ getAccList() .then(result => { let arr = []; for(let i=0; i<result.length; i++){ arr.push({label: result[i].Name, value: result[i].Id}); } this.accoption = arr; }) .catch(error => { console.error("Error occurred", error); }); } handleChange(event){ this.value = event.detail.value; } }If this information helps, please mark the answer as best. Thank youAll Answers
To display the values just replace ID with Id inside the loop at your Javascript file
//Replace: arr.push({value :result[i].Name, label :result[i].ID}); //With: arr.push({value :result[i].Name, label :result[i].Id});Just remember that Javascript is Case Sensitive.Let me know if that helps you.
In your Js file, when pushing the values into the array, you have set the account ID as the label and account name as the value. The account ID should be the value as it is unique and the account name should be the label as it is what you want to display.
Please try using below code for js file:
import { LightningElement, track } from 'lwc'; import getAccList from '@salesforce/apex/test_LWCWireDemo.getAccList'; export default class Test_comboboxDemo extends LightningElement { @track value = ''; @track accoption = []; get options(){ return this.accoption; } connectedCallback(){ getAccList() .then(result => { let arr = []; for(let i=0; i<result.length; i++){ arr.push({label: result[i].Name, value: result[i].Id}); } this.accoption = arr; }) .catch(error => { console.error("Error occurred", error); }); } handleChange(event){ this.value = event.detail.value; } }If this information helps, please mark the answer as best. Thank you