+ Start a Discussion
GovindarajGovindaraj 

Issue in populating lightning:select

Hi,
I'm getting empty list when trying to populate using server call.

Component:
<aura:component controller="Picklistcontroller" implements="force:appHostable" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <!-- <aura:attribute name="listOfAccount" type="string[]" default="Account1, Account2" />  -->
    <aura:attribute name="listOfAccount" type="string[]" />
    <aura:attribute name="selectedAccount" type="string" />
    <lightning:select name="accountList" label="List Of Accounts:" value="{!v.selectedAccount}" onchange="{!c.onChangeEvent}">
        <aura:iteration items="{!v.listOfAccount}" var="varAccount" >
            <option label="{!varAccount.label}" value="{!varAccount.value}"></option>   
        </aura:iteration>
    </lightning:select>
</aura:component>
Controller:
({
    doInit : function(component, event, helper) {
		var action = component.get("c.getAccountValues");
        var opts = [];
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state == 'SUCCESS') {
                var lstAccount = response.getReturnValue();
                console.log('lstAccount-->' +JSON.stringify(lstAccount));                 
                for (var i = 0; i < lstAccount.length; i++) {
                    opts.push({ 
                        label: lstAccount[i].Name,
                        value: lstAccount[i].Id
                    });
                }
                component.set('v.listOfAccount', opts);
                console.log('listOfAccount-->' +JSON.stringify(opts));
            }
        });
        $A.enqueueAction(action);
	},
    
	onChangeEvent : function(component, event, helper) {
		alert(component.get('v.selectedAccount'));
	}
})
Apex class:
public class Picklistcontroller {
    @AuraEnabled
    public static list<string> getAccountValues(){
        list<String> lstStringAccount = new list<String>();
        for(Account accObj : [SELECT Id, Name FROM Account Limit 10]) {
            lstStringAccount.add(string.valueOf(accObj));
        }
        return lstStringAccount;
    }
}
Screenshot:
User-added image

Can anyone pls assist on this ?
Best Answer chosen by Govindaraj
Raj VakatiRaj Vakati
Use this code
 
public class Picklistcontroller {
    @AuraEnabled
    public static list<Account> getAccountValues(){
        List<Account> accs =[SELECT Id, Name FROM Account Limit 10] ; 
        return accs;
    }
}
 
<aura:component controller="Picklistcontroller" implements="force:appHostable" >
    <!-- <aura:attribute name="listOfAccount" type="string[]" default="Account1, Account2" />  -->
    <aura:attribute name="listOfAccount" type="Map" />
    <aura:attribute name="selectedAccount" type="string" />
  
      <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:select name="accountList" label="List Of Accounts:" value="{!v.selectedAccount}" onchange="{!c.onChangeEvent}">
        <aura:iteration items="{!v.listOfAccount}" var="varAccount" >
            <option label="{!varAccount.label}" value="{!varAccount.value}"></option>   
        </aura:iteration>
    </lightning:select>
</aura:component>
 
({
    doInit : function(component, event, helper) {
        var action = component.get("c.getAccountValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state == 'SUCCESS') {
                var opts = [];
                
                var lstAccount = response.getReturnValue();
                console.log('lstAccount-->' +JSON.stringify(lstAccount)); 
                for(var key in lstAccount){
                    console.log(key);
                    opts.push({label: lstAccount[key].Name, value: lstAccount[key].Id});
                }
                component.set('v.listOfAccount', opts);
                console.log('listOfAccount-->' +JSON.stringify(opts));
            }
        });
        $A.enqueueAction(action);
    },
    
    onChangeEvent : function(component, event, helper) {
        alert(component.get('v.selectedAccount'));
    }
})

 

All Answers

Raj VakatiRaj Vakati
Use this code
 
public class Picklistcontroller {
    @AuraEnabled
    public static list<Account> getAccountValues(){
        List<Account> accs =[SELECT Id, Name FROM Account Limit 10] ; 
        return accs;
    }
}
 
<aura:component controller="Picklistcontroller" implements="force:appHostable" >
    <!-- <aura:attribute name="listOfAccount" type="string[]" default="Account1, Account2" />  -->
    <aura:attribute name="listOfAccount" type="Map" />
    <aura:attribute name="selectedAccount" type="string" />
  
      <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:select name="accountList" label="List Of Accounts:" value="{!v.selectedAccount}" onchange="{!c.onChangeEvent}">
        <aura:iteration items="{!v.listOfAccount}" var="varAccount" >
            <option label="{!varAccount.label}" value="{!varAccount.value}"></option>   
        </aura:iteration>
    </lightning:select>
</aura:component>
 
({
    doInit : function(component, event, helper) {
        var action = component.get("c.getAccountValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state == 'SUCCESS') {
                var opts = [];
                
                var lstAccount = response.getReturnValue();
                console.log('lstAccount-->' +JSON.stringify(lstAccount)); 
                for(var key in lstAccount){
                    console.log(key);
                    opts.push({label: lstAccount[key].Name, value: lstAccount[key].Id});
                }
                component.set('v.listOfAccount', opts);
                console.log('listOfAccount-->' +JSON.stringify(opts));
            }
        });
        $A.enqueueAction(action);
    },
    
    onChangeEvent : function(component, event, helper) {
        alert(component.get('v.selectedAccount'));
    }
})

 
This was selected as the best answer
Raj VakatiRaj Vakati
It is working ??
GovindarajGovindaraj
Thanks Raj, It's working !!

But i want to return it as list<string> instead of list<Account>
Raj VakatiRaj Vakati
Then try like this and close this thread if its wokring
 
public class Picklistcontroller {
    @AuraEnabled
    public static list<string> getAccountValues(){
        list<String> lstStringAccount = new list<String>();
        for(Account accObj : [SELECT Id, Name FROM Account Limit 10]) {
            lstStringAccount.add(string.valueOf(accObj.Name));
        }
        return lstStringAccount;
    }
}
 
<aura:component controller="Picklistcontroller" implements="force:appHostable" >
    <!-- <aura:attribute name="listOfAccount" type="string[]" default="Account1, Account2" />  -->
    <aura:attribute name="listOfAccount" type="Map" />
    <aura:attribute name="selectedAccount" type="string" />
  
      <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:select name="accountList" label="List Of Accounts:" value="{!v.selectedAccount}" onchange="{!c.onChangeEvent}">
        <aura:iteration items="{!v.listOfAccount}" var="varAccount" >
            <option label="{!varAccount.label}" value="{!varAccount.value}"></option>   
        </aura:iteration>
    </lightning:select>
</aura:component>
 
({
    doInit : function(component, event, helper) {
        var action = component.get("c.getAccountValues");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state == 'SUCCESS') {
                var opts = [];
                
                var lstAccount = response.getReturnValue();
                console.log('lstAccount-->' +JSON.stringify(lstAccount)); 
                for(var key in lstAccount){
                    console.log(lstAccount[key]);
                    opts.push({label: lstAccount[key], value: lstAccount[key]});
                }
                component.set('v.listOfAccount', opts);
                console.log('listOfAccount-->' +JSON.stringify(opts));
            }
        });
        $A.enqueueAction(action);
    },
    
    onChangeEvent : function(component, event, helper) {
        alert(component.get('v.selectedAccount'));
    }
})

 
GovindarajGovindaraj
Thanks Raj !