Javascript 反转网格以将数据显示为明细、小计和总计

我试过几种方法都没有用。下面的屏幕截图显示了一个包含总计、小计和详细信息的网格。我需要稍微反转这个网格，以便数据显示为详细信息、小计和总计

在这个例子中，我只显示了一个项目编号，IMCOPS；可以有多个项目编号。网格也按项目编号和任务编号分组，但用户可以更改分组或添加/删除列。我可以创建两个数组，一个包含总计，另一个仅按顺序包含详细信息

下面的数组是我当前用于构建网格的数组。索引0用于定义网格列。指数1是总数。索引2是一个间隔符。指数3是小计。索引4、5和6是索引3的详细信息。然后该模式重复

0:
    Prime Contract No: ""
    BC ID: ""
    Project Number: ""
    Task Number: ""
    Task Name: ""
    Task Cognizant Org: ""
    Hours MTD: ""
    Hours YTD: ""
__proto__: Object
1:
    Hours MTD: 542.3
    Hours YTD: 1690.2
    Project Number: "IMCOPS"
__proto__: Object
2:  null
3:
    Hours MTD: 177.1
    Hours YTD: 1325
    Task Number: "22.1.02"
__proto__: Object
4:
    BC ID: "011500000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02"
    Task Name: "TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 0
    Hours YTD: 0
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
5:
    BC ID: "020100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02"
    Task Name: "TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 0
    Hours YTD: 0
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
6:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02"
    Task Name: "TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 177.1
    Hours YTD: 1325
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
7:
    Hours MTD: 1
    Hours YTD: 1
    Task Number: "22.1.02.2202"
__proto__: Object
8:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02.2202"
    Task Name: "2202 TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 1
    Hours YTD: 1
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
9:
    Hours MTD: 142.2
    Hours YTD: 142.2
    Task Number: "22.1.02.2210"
__proto__: Object
10:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02.2210"
    Task Name: "2210 TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 142.2
    Hours YTD: 142.2
    G2: "IMCOPS"
    G3: "2"
__proto__: Object
11:
    Hours MTD: 222
    Hours YTD: 222
    Task Number: "22.1.02.2220"
__proto__: Object
12:
    BC ID: "030100000"
    Project Number: "IMCOPS"
    Task Number: "22.1.02.2220"
    Task Name: "2220 TRAINING"
    Task Cognizant Org: "2200 - ENTERPRISE BUSINESS INFORMATION SERVICES"
    Hours MTD: 222
    Hours YTD: 222
    G2: "IMCOPS"
    G3: "2"

更新

下面是我希望实现的附加信息，以及一个Plunker示例。下图左侧是阵列的外观，右侧是我大致希望达到的效果

下面是我编写的一些代码的Plunker示例。我几乎让它工作了；然而，我没有拿起第一个“1级”和“0级”（总计）出现两次。注意，这是我问题的一个简单例子。初始阵列可能具有N阶的多个级别

---

能否请您分享一个快速模型（使用Excel或其他工具）以了解最终结果的外观

---

我相信我已经解决了我的问题。在我的代码中，我无意中过早地删除了小计数组的最后一个元素。以下是更新的Plunker：

---

需要将我的更改折叠到我的项目中，看看它是否能与多个级别的小计一起工作。

我用我希望实现的期望输出的图片编辑了我的问题。