Lightning Component is not working for Case Queues

Question

I having trouble to populate the list of Queues in Lightning Page.

Lightning Component:

<aura:component controller="Test" implements="force:appHostable" >

<aura:attribute name="queues" type="String[]"/>


<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ul class="list-group">

    <aura:iteration items="{!v.queues}" var="queue">
          <li class="list-group-item">
                <p>{!queue.name}</p> 
            <p>Test</p>
        </li>
    </aura:iteration>
</ul>

Lightning Controller:

({
doInit : function(component, event) {
    var action = component.get("c.findAll");
    action.setCallback(this, function(a) {
        component.set("v.queues", a.getReturnValue());
        console.log("getreturnvalue" + a.getReturnValue());
    });
    $A.enqueueAction(action);

}

})

Lightning Apex Logic:
  @AuraEnabled
        public static List <String> findAll() {
            List<String> getQueue = new List<String>();
            for (Group gr : [SELECT Id,name FROM Group where Type = 'Queue' LIMIT 10] ){
                getQueue.add (gr.name);  
            }
            return getQueue;        
    }

In the Console, am getting the List of queues but it is not showing in UI. Can you please let me know am i missing anything?

Answer 1

As you're iterating over a List<String> and not List<Group>. queue variable represent a String value; so change:

<p>{!queue.name}</p> 

To:

<p>{!queue}</p>