As I need to filter out specific activities from a list, I am attempting to create the ActivityHistory and Open Activity component for a Lightning Page.

I understand how to display lists when they are different objects, however, when I am querying form the same object I am struggling with determining how to display each list where I want.

APEX Controller:

public with sharing class CH_Activity_Viewer_Controller {
@AuraEnabled
public static List<WorkOrder> getOpenAvtivities(Id recordId)
{
    System.debug(recordId);
    return [SELECT Id, (SELECT Id, Subject, Who.Name, StartDateTime, DurationInMinutes FROM OpenActivities) FROM WorkOrder WHERE Id = :recordId];
}

@AuraEnabled
public static List<WorkOrder> getActivityHistory(Id recordId)
{
    System.debug(recordId);
    return [SELECT Id, (SELECT Id, Subject, Who.Name, StartDateTime, DurationInMinutes FROM ActivityHistories) FROM WorkOrder WHERE Id = :recordId];
}
}

Lightning Controller

({
loadInterface : function(component, event, helper)
{
    $( function()
    {
        $( "#accordion" ).accordion();
    });
},

doInit : function(component, event, helper)
{
    var action1 = component.get("c.getOpenAvtivities");
    var action2 = component.get("c.getActivityHistory");
    action1.setParams({
        "recordId" : component.get("v.recordId")
    });
    action1.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            //update all the action1 attributes in the component.
            component.set("v.action1",response.getReturnValue());               
        }
        else if (state === "ERROR") {
            var errors = response.getError();
            if (errors) {
                if (errors[0] && errors[0].message) {
                    console.log("Error message: " + 
                             errors[0].message);
                }
            } else {
                console.log("Unknown error");
            }
        }
    });
    action2.setParams({
        "recordId" : component.get("v.recordId")
    });
    action2.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            //update all the action2 attributes in the component.
            component.set("v.action2",response.getReturnValue());               
        }
        else if (state === "ERROR") {
            var errors = response.getError();
            if (errors) {
                if (errors[0] && errors[0].message) {
                    console.log("Error message: " + 
                             errors[0].message);
                }
            } else {
                console.log("Unknown error");
            }
        }
    });

    $A.enqueueAction(action1);
    $A.enqueueAction(action2);
}  
})

Component

<aura:component controller="CH_Activity_Viewer_Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
<ltng:require scripts="/resource/ActivityViewer/ActivityViewer/jquery-3.2.1.min.js,/resource/ActivityViewer/ActivityViewer/jquery-ui.js" afterScriptsLoaded="{!c.loadInterface}"/>
<ltng:require styles="/resource/ActivityViewer/ActivityViewer/jquery-ui.css"/>
<aura:attribute name="action1" type="WorkOrder[]" />
<aura:attribute name="action2" type="WorkOrder[]" />
<aura:attribute name="recordId" type="Id" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />



<div id="accordion">
    <h3>Open Activities</h3>
    <div>
        <aura:iteration var="wo1" items="{!v.action1}" >
            <aura:iteration var="act1" items="{!wo1.OpenActivities}" >
            <p><b>{!act1.Subject}</b></p>
            <p>{!act1.Who.Name}</p>
            <p>{!act1.StartDateTime}</p>
            <p>{!act1.DurationInMinutes} MIN</p>
            </aura:iteration>
        </aura:iteration>
    </div>
    <h3>Activity History</h3>
    <div>
        <aura:iteration var="wo2" items="{!v.action2}" >
            <aura:iteration var="act2" items="{!wo2.OpenActivities}" >
            <p><b>{!act2.Subject}</b></p>
            <p>{!act2.Who.Name}</p>
            <p>{!act2.StartDateTime}</p>
            <p>{!act2.DurationInMinutes} MIN</p>
            </aura:iteration>
        </aura:iteration>
    </div>
</div>

Any Help is greatly appreciated.​