Visualforce Map Render if Keys Match

Question

In my Visualforce Extension Controller I have 2 Maps using the same Keys

1. Company - Map <Integer, List>
2. Role - Map <Integer, List>

In my VF Page I would like the output to be grouped by Company and display only the Roles with the same Key as the Parent Company

• Company 1
  • Role 1
  • Role 2
• Company 2
  • Role 3
  • Role 4
• Company 3
  • Role 5
  • Role 6

Currently my page is outputting all Roles for each Company i.e

• Company 1
  • Role 1
  • Role 2
  • Role 3
  • Role 4
  • Role 5
  • Role 6
• Company 2
  • Role 1
  • Role 2
  • Role 3.....

Is there a way i can use the Render functionality based on the Key Values?

VF Page

<apex:page standardController="Match__c" extensions="Test_ExtensionController">
    <apex:repeat value="{!CompanyMap}" var="Key">
        <apex:repeat value="{!CompanyMap[Key]}" var="company">
            <div>
                {!company} 
            </div>
            <apex:repeat value="{!RoleMap}" var="Key">
                <apex:repeat value="{!RoleMap[Key]}" var="role">
                    <div>
                        {!role} 
                    </div>
                </apex:repeat>      
            </apex:repeat>
        </apex:repeat>      
    </apex:repeat>
</apex:page>

Extension Controller

public without sharing class Test_ExtensionController {
    
    public Map <Integer, List<String>> CompanyMap {get;set;}
    public Map <Integer, List<String>> RoleMap {get;set;}

    public Test_ExtensionController(ApexPages.StandardController Controller){

        List<String> RoleList1 = new List<String>();
            RoleList1.add('Title1');
            RoleList1.add('Title2');

        List<String> RoleList2 = new List<String>();
            RoleList2.add('Title3');
            RoleList2.add('Title4');

        List<String> RoleList3 = new List<String>();
            RoleList3.add('Title5');
            RoleList3.add('Title6');

        List<String> CompanyList1 = new List<String>();
            CompanyList1.add('Company1');

        List<String> CompanyList2 = new List<String>();
            CompanyList2.add('Company2');

        List<String> CompanyList3 = new List<String>();
            CompanyList3.add('Company3');

        RoleMap = new Map <Integer, List<String>>();
            RoleMap.put(1,RoleList1);
            RoleMap.put(2,RoleList2);
            RoleMap.put(3,RoleList3);

        CompanyMap = new Map <Integer, List<String>>();
            CompanyMap.put(1,CompanyList1);
            CompanyMap.put(2,CompanyList2);
            CompanyMap.put(3,CompanyList3);

    }
}

Answer 1

I think this is what you are looking for:

<apex:repeat value="{!CompanyMap[Key]}" var="company">
    <div>
        {!company} 
    </div>
    <apex:repeat value="{!RoleMap[Key]}" var="role">
        <div>
            {!role} 
        </div>   
    </apex:repeat>
</apex:repeat>