Invert grid to display data as details, subtotals and the grand total

Question

I have tried several approaches to no avail. The below screen capture shows a grid with a grand total, followed by subtotals and then details. I need to somewhat invert this grid so that the data displays as details, subtotals and the grand total.

Current State of Grid

In this example I show only one Project Number, IMCOPS; it is possible to have multiple Project Numbers. The grid is also grouped by Project Number and Task Number, but the user can change the groupings or add/remove columns. It is possible for me to create two arrays one that contains the totals and one that only has the details in sequential order.

The following array is what I currently used to build up the grid. Index 0 is used to define the grid columns. Index 1 is the Grand Total. Index 2 is a spacer. Index 3 is a SubTotal. Index 4, 5 and 6 are the details to index 3. The pattern then repeats.

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"

UPDATE

Here is additional information on what I am hoping to achieve plus a Plunker example. The below image the left side is what the array looks like and the right side is what I roughly hope to achieve.

Before and After

Here is a Plunker example of some code I wrote. I almost have it working; however, I am not picking up the first "level 1" and "level 0" (Grand Total) appears twice. Note, this is a simple illustration of my problem. It is possible for the initial array to have multiple levels to the nth degree.

Plunker example

Answer 1

I believe I have solved my issue. In my code I was inadvertently removing the last element of my subtotal array too soon. Here is an updated Plunker:

Plunker solution

Need to fold my changes into my project and see if it will work with multiple levels of subtotals.