+ Start a Discussion
Viru D.Viru D. 

trouble with setting lightning picklist with database's id and name value.

My requirement is to show account name in the picklist and store id behind so when you change the value in the picklist, you will get id easily.
I tried something like this but not working.

I think this portion is not working : 
label: allValues[i].name,
value: allValues[i].id

Let me know what do you think.


markup :
<aura:attribute name="accounts" type="List" />
  <div class="slds-form-element slds-m-top_x-small slds-size_8-of-12 slds-m-left_large slds-box">
            <label class="slds-text-heading_small slds-form-element__label" for="input-unique-id">Select Account :</label>
            <div class="slds-form-element__control"> 
            <lightning:select name="mySelect" label=""  aura:id="mySelect" value="{!v.SelectedPricebook}" onchange="{!c.onPicklistChange}" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" >
                <option text="--Select--" value="--Select--" selected="--Select--"/>
                <aura:iteration items="{!v.accounts}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
            </div>
    </div>  
    
Helper :

getAccountList2 : function(component) {
        console.log('==In getAccountList2==');  
        var action = component.get("c.getAccounts");
        var opts = [];
        //Setting the Callback
            action.setCallback(this,function(response){
                //get the response state
                var state = response.getState();
                
                //check if result is successfull
                if(state == "SUCCESS"){
                   var allValues = response.getReturnValue();
                  for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass", 
                        label: allValues[i].name,
                        value: allValues[i].id
                    });
                }
                component.set("v.options", opts);
                
  
                } else if(state == "ERROR"){
                    alert('Error in calling server side action');
                }
            });
            
            //adds the server-side action to the queue        
            $A.enqueueAction(action);
    }

Class :
  @AuraEnabled
      public static List <Account> getAccounts() {
        return [SELECT id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone FROM Account ORDER BY createdDate ASC limit 10];
      }
    







 
Best Answer chosen by Viru D.
Raj VakatiRaj Vakati
Here is the complete code which is working for me 
<aura:component controller="Product_Segment_Comp_CLS" 
                access="global" >
    <aura:attribute name="accounts" type="List" />
    <aura:attribute name="OpportunutyId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="PricebookList" type="List" />
    <aura:attribute name="PricebookList2" type="pricebook2[]" />
    <aura:attribute name="SelectedPricebook" type="String"/>
    
    IN : Product Segment Comp Opty id : {!v.OpportunutyId}
    
    <div class="slds-form-element slds-m-top_x-small slds-size_8-of-12 slds-m-left_large slds-box">
        <label class="slds-text-heading_small slds-form-element__label" for="input-unique-id">Select Account :</label>
        <div class="slds-form-element__control"> 
            <lightning:select name="mySelect" label=""  aura:id="mySelect" value="{!v.SelectedPricebook}" onchange="{!c.onPicklistChange}" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" >
                <option text="--Select--" value="--Select--" selected="--Select--"/>
                <aura:iteration items="{!v.accounts}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
        </div>
    </div>  
</aura:component>
 
({
    doInit : function(component, event, helper) {
        console.log('==In doInit==');  
        //helper.getSegmentDetails(component);
        helper.getAccountList2(component);  
    },
    onPicklistChange: function(component, event, helper) {
        // get the value of select option
        //alert(event.getSource().get("v.value"));
        var strtype1 = event.getSource().get("v.value")
        console.log('==strtype1==' + strtype1); 
          component.set("v.OpportunutyId", strtype1);
    }
    
})
 
({
    
    getAccountList2 : function(component) {
        console.log('==In getAccountList2==');  
        var action = component.get("c.getAccounts");
        var opts = [];
        //Setting the Callback
        action.setCallback(this,function(response){
            //get the response state
            var state = response.getState();
            
            //check if result is successfull
            if(state == "SUCCESS"){
                var allValues = response.getReturnValue();
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass", 
                        label: allValues[i].Name,
                        value: allValues[i].Id
                    });
                }
                component.set("v.accounts", opts);
                
                
            } else if(state == "ERROR"){
                alert('Error in calling server side action');
            }
        });
        
        //adds the server-side action to the queue        
        $A.enqueueAction(action);
    }
    
})

 

All Answers

Raj VakatiRaj Vakati
Use this code
 
<aura:component controller="AccCL">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:attribute name="accounts" type="List" />
 
    <div class="slds-form-element slds-m-top_x-small slds-size_8-of-12 slds-m-left_large slds-box">
        <label class="slds-text-heading_small slds-form-element__label" for="input-unique-id">Select Account :</label>
        <div class="slds-form-element__control"> 
            
            
            
            <lightning:select name="mySelect" label=""  aura:id="mySelect" value="{!v.SelectedPricebook}" onchange="{!c.onPicklistChange}" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" >
                <option text="--Select--" value="--Select--" selected="--Select--"/>
                <aura:iteration items="{!v.accounts}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
        </div>
    </div>  
</aura:component>
 
({
    myAction : function(component, event, helper) {
        
    },
    doInit : function(component) {
        console.log('==In getAccountList2==');  
        var action = component.get("c.getAccounts");
        var opts = [];
        //Setting the Callback
        action.setCallback(this,function(response){
            //get the response state
            var state = response.getState();
            
            //check if result is successfull
            if(state == "SUCCESS"){
                var allValues = response.getReturnValue();
                
                
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass", 
                        label: allValues[i].Name,
                        value: allValues[i].Id
                    });
                }
                component.set("v.accounts", opts);
                
                
            } else if(state == "ERROR"){
                alert('Error in calling server side action');
            }
        });
        
        //adds the server-side action to the queue        
        $A.enqueueAction(action);
    }
})

 
Viru D.Viru D.
There is no change in code given by you.

also I have controller code : 

({
     doInit : function(component, event, helper) {
        console.log('==In doInit==');  
        //helper.getSegmentDetails(component);
       helper.getAccountList2(component);  
    },
    onPicklistChange: function(component, event, helper) {
        // get the value of select option
        //alert(event.getSource().get("v.value"));
        var strtype1 = event.getSource().get("v.value")
        console.log('==strtype1==' + strtype1); 
    }
    
})
Raj VakatiRaj Vakati
GIve me you complete code to fix it rather than bit and pieces .. I know how to get the ID .. 


Change your code as below  .. 
 
cmp.find("selectItem").get("v.value").

instead of 

 event.getSource().get("v.value")

 
Viru D.Viru D.
Here is complete code :

Problem is :- it is not populating values in picklist. so there is syntax problem in.

label: allValues[i].name,
value: allValues[i].id


Let me know.

markup :
<aura:component controller="Product_Segment_Comp_CLS" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global" >
    <aura:attribute name="accounts" type="List" />
    <aura:attribute name="OpportunutyId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="PricebookList" type="List" />
    <aura:attribute name="PricebookList2" type="pricebook2[]" />
     <aura:attribute name="SelectedPricebook" type="String"/>
    
    IN : Product Segment Comp Opty id : {!v.OpportunutyId}
    
    <div class="slds-form-element slds-m-top_x-small slds-size_8-of-12 slds-m-left_large slds-box">
            <label class="slds-text-heading_small slds-form-element__label" for="input-unique-id">Select Account :</label>
            <div class="slds-form-element__control"> 
            <lightning:select name="mySelect" label=""  aura:id="mySelect" value="{!v.SelectedPricebook}" onchange="{!c.onPicklistChange}" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" >
                <option text="--Select--" value="--Select--" selected="--Select--"/>
                <aura:iteration items="{!v.accounts}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
            </div>
    </div>  
</aura:component>

Controller :
({
     doInit : function(component, event, helper) {
        console.log('==In doInit==');  
        //helper.getSegmentDetails(component);
       helper.getAccountList2(component);  
    },
    onPicklistChange: function(component, event, helper) {
        // get the value of select option
        //alert(event.getSource().get("v.value"));
        var strtype1 = event.getSource().get("v.value")
        console.log('==strtype1==' + strtype1); 
    }
    
})

Helper:-

({
    
    getAccountList2 : function(component) {
        console.log('==In getAccountList2==');  
        var action = component.get("c.getAccounts");
        var opts = [];
        //Setting the Callback
            action.setCallback(this,function(response){
                //get the response state
                var state = response.getState();
                
                //check if result is successfull
                if(state == "SUCCESS"){
                   var allValues = response.getReturnValue();
                  for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass", 
                        label: allValues[i].name,
                        value: allValues[i].id

                    });
                }
                component.set("v.options", opts);
                
  
                } else if(state == "ERROR"){
                    alert('Error in calling server side action');
                }
            });
            
            //adds the server-side action to the queue        
            $A.enqueueAction(action);
    }
     
})

Class:-

public class Product_Segment_Comp_CLS {
    
        
    public Product_Segment_Comp_CLS(){
        
    }
     
    
     @AuraEnabled
    public static List<string> getPricebookList() {
        
        List<string> ListPricebook = new List<string>();
        
        for(Pricebook2 PB : [Select Name From Pricebook2 order by IsStandard desc]  ) 
            Listpricebook.add(PB.name);
        
        //ListPricebook = [Select id,Name From Pricebook2 order by IsStandard desc]; 
        system.debug('==ListPricebook==' + ListPricebook);
        return ListPricebook;     
    }

@AuraEnabled
public static List<Pricebook2> getPricebookList2() {
        system.debug('==in getPricebookList2=='); 
        List<Pricebook2> ListPricebook = new List<Pricebook2>();
        ListPricebook = [Select id,name From Pricebook2 order by IsStandard desc];

        system.debug('==ListPricebook==' + ListPricebook);
        return ListPricebook;     
    }

@AuraEnabled
public static map<string,string> getPricebookList3() {
        system.debug('==in getPricebookList2=='); 
        map<string,string> map_pricebook = new map<string,string>();
        for(Pricebook2 pb : [Select id,name From Pricebook2 order by IsStandard desc] ) 
             map_pricebook.put(pb.id,pb.name);
            
        system.debug('==map_pricebook==' + map_pricebook);
        return  map_pricebook;     
    }

    
    @AuraEnabled
      public static List <Account> getAccounts() {
        return [SELECT id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone FROM Account ORDER BY createdDate ASC limit 10];
      }
    
    
}
 
Raj VakatiRaj Vakati
Can you explain what you are trying to do ??


the issue in your code you used name,id but it should be Name ,Id
 
label: allValues[i].Name,
                        value: allValues[i].Id

 
Viru D.Viru D.
I changed it but bad luck. Uppercase or lowercase is not having any effect here. it is still not populating anything.

anything else ?

 
Raj VakatiRaj Vakati
Here is the complete code which is working for me 
<aura:component controller="Product_Segment_Comp_CLS" 
                access="global" >
    <aura:attribute name="accounts" type="List" />
    <aura:attribute name="OpportunutyId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="PricebookList" type="List" />
    <aura:attribute name="PricebookList2" type="pricebook2[]" />
    <aura:attribute name="SelectedPricebook" type="String"/>
    
    IN : Product Segment Comp Opty id : {!v.OpportunutyId}
    
    <div class="slds-form-element slds-m-top_x-small slds-size_8-of-12 slds-m-left_large slds-box">
        <label class="slds-text-heading_small slds-form-element__label" for="input-unique-id">Select Account :</label>
        <div class="slds-form-element__control"> 
            <lightning:select name="mySelect" label=""  aura:id="mySelect" value="{!v.SelectedPricebook}" onchange="{!c.onPicklistChange}" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" >
                <option text="--Select--" value="--Select--" selected="--Select--"/>
                <aura:iteration items="{!v.accounts}" var="item">
                    <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
                </aura:iteration>
            </lightning:select>
        </div>
    </div>  
</aura:component>
 
({
    doInit : function(component, event, helper) {
        console.log('==In doInit==');  
        //helper.getSegmentDetails(component);
        helper.getAccountList2(component);  
    },
    onPicklistChange: function(component, event, helper) {
        // get the value of select option
        //alert(event.getSource().get("v.value"));
        var strtype1 = event.getSource().get("v.value")
        console.log('==strtype1==' + strtype1); 
          component.set("v.OpportunutyId", strtype1);
    }
    
})
 
({
    
    getAccountList2 : function(component) {
        console.log('==In getAccountList2==');  
        var action = component.get("c.getAccounts");
        var opts = [];
        //Setting the Callback
        action.setCallback(this,function(response){
            //get the response state
            var state = response.getState();
            
            //check if result is successfull
            if(state == "SUCCESS"){
                var allValues = response.getReturnValue();
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass", 
                        label: allValues[i].Name,
                        value: allValues[i].Id
                    });
                }
                component.set("v.accounts", opts);
                
                
            } else if(state == "ERROR"){
                alert('Error in calling server side action');
            }
        });
        
        //adds the server-side action to the queue        
        $A.enqueueAction(action);
    }
    
})

 
This was selected as the best answer
Viru D.Viru D.
Perfect !! I got the issue, in my code i was setting up :  component.set("v.options", opts); which is wrong. it should be component.set("v.accounts", opts); . Thanks for all your efforts and quick response.