XSL for joined lists (HTML and JS Array output)

data.xml

<dsQueryResponse>
    <Projects>
        <Rows>
            <Row ID="1"  ContentType="Item" Title="Project A" />
            <Row ID="2"  ContentType="Item" Title="Project B" />
        </Rows>
    </Projects>
    <Tasks>
        <Rows>
            <Row  Title="Task 1" Priority="(2) Normal" Status="Not Started" PercentComplete="0 %" PercentComplete.="0" Related_x0020_Project_x003a_ID="1" ID="1" />
            <Row  Title="Task 2" Priority="(2) Normal" Status="Not Started" PercentComplete="0 %" PercentComplete.="0" Related_x0020_Project_x003a_ID="2" ID="2" />
            <Row  Title="Task 3" Priority="(2) Normal" Status="Not Started" PercentComplete="0 %" PercentComplete.="0" Related_x0020_Project_x003a_ID="1" ID="3" />
        </Rows>
    </Tasks>
</dsQueryResponse>

data.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
  <!-- http://sharepointexperience.com -->

  <xsl:output method="html" indent="yes"/>
  <!-- This template is the "wrapper" or "container" for the custom view. -->
  <xsl:template match="/">
    <!-- This is the actual wrapper element that will be emitted -->
    <dl>
      <!-- This will tell the data view to look for the actual content
            and come back when it's done. -->
      <xsl:apply-templates select="/dsQueryResponse/Projects/Rows/Row" mode="Projects"/>
    </dl>
    <script>
          var projectsAndTasks = [
        <xsl:apply-templates select="/dsQueryResponse/Projects/Rows/Row" mode="ProjectsJS"/>
          ];
        </script>
    <!-- end wrapper -->
  </xsl:template>
  <xsl:template match="Row" mode="ProjectsJS">
    {
      projectTitle: "<xsl:value-of select="@Title"/>",
      tasks: [
    <xsl:apply-templates select="/dsQueryResponse/Tasks/Rows/Row[@Related_x0020_Project_x003a_ID=current()/@ID]" mode="TasksJS"/>
    ]
    }
    <xsl:if test="position() != last()">,</xsl:if>
  </xsl:template>
  <xsl:template match="Row" mode="TasksJS">
    {
        Title: "<xsl:value-of select="@Title"/>"
      }
    <xsl:if test="position() != last()">,</xsl:if>
  </xsl:template>
  <xsl:template match="Row" mode="Projects">
    <!-- This markup is used for each item in the list -->
    <dt>
      <xsl:value-of select="@Title"/>
    </dt>
    <dd>
      <ul>
        <xsl:apply-templates select="/dsQueryResponse/Tasks/Rows/Row[@Related_x0020_Project_x003a_ID=current()/@ID]" mode="Tasks"/>
      </ul>
    </dd>
  </xsl:template>
  <xsl:template match="Row" mode="Tasks">
    <li>
      <xsl:value-of select="@Title"/>
    </li>
  </xsl:template>
</xsl:stylesheet>