显示具有产品和产品系列详细信息的机会

如何解决显示具有产品和产品系列详细信息的机会

我有机会（系统）拥有属于不同家族的两种产品。 我试图在点击机会时使用闪电手风琴来显示机会，应该显示产品系列，点击系列我应该得到产品名称。 我已经尝试了下面的代码，但我只得到了机会名称。 谁能帮我获取产品系列和产品详细信息。

Apex class :   
public class OpportunityFamilyProducts {   
   @Auraenabled  
    public static  Map<string,List<OpportunityLineItem>> displayOpportunities() {  
        set<Id> OppIds = new set<Id>();  
        Map<string,List<OpportunityLineItem>> oppswithProducts = new Map<string,List<OpportunityLineItem>>();    
        List<Opportunity> oppList = [SELECT Name from Opportunity where Name=:'system'];   
        for(Opportunity opp: oppList){  
            oppIds.add(opp.Id);  
        }  
        List<OpportunityLineItem> oppLineItems = [SELECT OpportunityId,Opportunity.Name,Product2Id,product2.Family from OpportunityLineItem where 
                                                  OpportunityId in:OppIds];    
        for(OpportunityLineItem eachitem : oppLineItems)   {
            if(oppswithproducts.containskey(eachitem.Opportunity.Name)){  
                oppswithproducts.get(eachitem.Opportunity.Name).add(eachitem);  
            }  
            else {  
                oppswithproducts.put(eachitem.Opportunity.Name,new list<OpportunityLineItem> 
 {eachitem});
            }  
        }  
        system.debug('aaaaaaaa' +oppswithProducts);  
        return oppswithProducts;  
        
    }  
}  


Component :  
<aura:component implements="flexipage:availableForAllPageTypes" controller="OpportunityFamilyProducts"
                access="global" >   
    <aura:attribute name="mapResults" type="Object" />  
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    <lightning:accordion aura:id="accordion" activeSectionName="B">  
        <aura:iteration items="{!v.mapResults}"  var="mapEntry"> 
            <lightning:accordionSection name="{!mapEntry.key}" label="{!mapEntry.key}">  
                <aura:set attribute="body">  
                    <lightning:accordion aura:id="accordion1" activeSectionName="B">  
                        <aura:iteration items="{!mapEntry.value}" var="LineItem">  
                            <lightning:accordionSection name="{!mapEntry.value}" label="{!mapEntry.value}">  
                                <p>{!LineItem.product2.Family}</p>  
                            </lightning:accordionSection>  
                        </aura:iteration>  
                    </lightning:accordion> 
                </aura:set>
            </lightning:accordionSection>  
        </aura:iteration>  
    </lightning:accordion>  
</aura:component>  

Js Controller :  
({  
    doInit : function(component,event,helper) {  
        var action=component.get('c.displayOpportunities');  
        action.setCallback(this,function(response){  
            var state = response.getState();  
            console.log('state ='+state);  
            if (state === "SUCCESS") {  
                var mapResult = response.getReturnValue();  
                console.log('ssssssssss' +response.getReturnValue());  
                var results = [];  
                for ( var key in mapResult ) {    
                    results.push({value:mapResult[key],key:key});  
                    console.log('222222'+JSON.stringify(results));  
                }  
                component.set("v.mapResults",results);  
              }  
        });  
   $A.enqueueAction(action);
    }  
})  

Output : [I am getting only opportunity name,but when i onclick of it i should get product families,and on click of family i should display product name][1]


  [1]: https://i.stack.imgur.com/IgvHM.jpg