Aura iteration for Kanban

Question

I'm trying to create Kanban. My lists have many cards, but I can see only one card per list. I added ORDER BY ListId__c to SOQL but I still can't see other cards. First 2 lists have a few cards. How can I get all cards for my Kanban?

Apex:

@AuraEnabled
public static Map<String, String> getCards(){
    Map<String, String> createdCardsMap = new Map<String, String>();
    List<Trello_Task__c> tasks = [SELECT Id, ListId__c, Name FROM Trello_Task__c WHERE ListId__c != '' ORDER BY ListId__c];

    for(Trello_Task__c task : tasks){
        createdCardsMap.put(task.ListId__c, task.Name);
        System.debug(createdCardsMap);
    }
    return createdCardsMap;
}

Lightning cmp:

<aura:iteration items="{!v.columns}" var="itemColumn" indexVar="key">
    <div>{!itemColumn.key} - {!itemColumn.value}</div> 
    <lightning:layout multipleRows="true">
        <aura:iteration items="{!v.rows}" var="itemRow" indexVar="key" >
            <aura:if isTrue="{!itemRow.key == itemColumn.key}">
                <lightning:layoutItem size="12" padding="around-small">
                    <lightning:card class="card">
                        <aura:set attribute="title">
                            <div>{!itemRow.key} - {!itemRow.value}</div> 
                        </aura:set>
                    </lightning:card>
                </lightning:layoutItem>
            </aura:if>
         </aura:iteration>
    </lightning:layout>
</aura:iteration>

JS:

doGetLists : function(component, event, helper) {
    var getLists = component.get("c.getLists");

    getLists.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {                
            var arrayMapKeys = [];
            var result = response.getReturnValue();
            for(var key in result){
                arrayMapKeys.push({key:key, value:result[key]});
            }
            component.set('v.columns', arrayMapKeys);
        }
    });           
    $A.enqueueAction(getLists);
},

doGetCards : function(component, event, helper) {
    var getCards = component.get("c.getCards");

    getCards.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {                
            var arrayMapKeys = [];
            var result = response.getReturnValue();
            for(var key in result){
                arrayMapKeys.push({key:key, value:result[key]});
            }
            component.set('v.rows', arrayMapKeys);
        }
    });           
    $A.enqueueAction(getCards);
},

Answer 1

The problem comes from the fact that you have multiple tasks with the same list id. However, you're iterating through your list of tasks and you overwrite the previously map value by the new one. Because your map values are not a list of tasks.

You have to use a Map of type: Map<String, List<String>>.

The code will be:

Map<String, List<String>> createdCardsMap = new Map<String, List<String>>();
List<Trello_Task__c> tasks = [SELECT Id, ListId__c, Name FROM Trello_Task__c WHERE ListId__c != '' ORDER BY ListId__c];

for(Trello_Task__c task : tasks){
    if(createdCardsMap.containsKey(task.ListId__c) == false){
        createdCardsMap.put(task.ListId__c, new List<String>());
    }
    createdCardsMap.get(task.ListId__c).add(task.Name);
    System.debug(createdCardsMap);
}
return createdCardsMap;