How to iterarte through nested list of objects and created html table having colspan decided on the nested subarray?

Question

I have array of objects in which each object has list of subheaders, which then again can have subheaders. I want to create table thead on the basis of the subheaders lists in a array.

I want a table as follows:

<table border="1">
<tbody>
<thead ><th colspan="10">Lavere grads nivå</th>
<th colspan="10"> Integrert mastergrad/profesjon</th>
</thead>
<thead ><th colspan="5">Kvalifisert</th>
<th colspan="5"> Alle</th>
<th colspan="5">Kvalifisert</th>
<th colspan="5"> Alle</th>
</thead>
<thead>
<th>2014</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
<th>2018</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
<th>2018</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
<th>2018</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
<th>2018</th>
</thead>
</tbody>
</table>

Following is my array that I need to bind in a table header:

"headers": [
    {
        "text": "Lavere grads nivå",
        "headerRange": "B7:K7",
        "headerRowIndex": 7,
        "colCount": 10,
        "subHeaders": [
            {
                "text": "Kvalifisert",
                "headerRange": "B8:F8",
                "headerRowIndex": 8,
                "colCount": 5,
                "subHeaders": [
                    {
                        "text": "2014",
                        "headerRange": "B9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2015",
                        "headerRange": "C9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2016",
                        "headerRange": "D9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2017",
                        "headerRange": "E9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2018",
                        "headerRange": "F9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    }
                ]
            },
            {
                "text": "Alle",
                "headerRange": "G8:K8",
                "headerRowIndex": 8,
                "colCount": 5,
                "subHeaders": [
                    {
                        "text": "2014",
                        "headerRange": "G9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2015",
                        "headerRange": "H9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2016",
                        "headerRange": "I9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2017",
                        "headerRange": "J9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2018",
                        "headerRange": "K9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    }
                ]
            }
        ]
    },
    {
        "text": "Integrert mastergrad/profesjon",
        "headerRange": "L7:U7",
        "headerRowIndex": 7,
        "colCount": 10,
        "subHeaders": [
            {
                "text": "Kvalifisert",
                "headerRange": "L8:P8",
                "headerRowIndex": 8,
                "colCount": 5,
                "subHeaders": [
                    {
                        "text": "2014",
                        "headerRange": "L9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2015",
                        "headerRange": "M9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2016",
                        "headerRange": "N9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2017",
                        "headerRange": "O9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2018",
                        "headerRange": "P9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    }
                ]
            },
            {
                "text": "Alle",
                "headerRange": "Q8:U8",
                "headerRowIndex": 8,
                "colCount": 5,
                "subHeaders": [
                    {
                        "text": "2014",
                        "headerRange": "Q9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2015",
                        "headerRange": "R9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2016",
                        "headerRange": "S9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2017",
                        "headerRange": "T9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    },
                    {
                        "text": "2018",
                        "headerRange": "U9",
                        "headerRowIndex": 9,
                        "subHeaders": null,
                        "colCount": 0
                    }
                ]
            }
        ]
    }
]

Can you please help me in achieving this?

I have tried using ngFor but unable to create row having list of all subheaders.

Answer 1

   <tr>
  <ng-container *ngFor="let dataMain of headers; let id = index;trackBy: trackByFn">
    <th colspan="10">{{dataMain.text}}</th>
  </ng-container>
</tr>
<tr *ngIf="headers.length>0">
  <ng-container *ngFor="let dataMain of headers; let id1 = index">
    <ng-container *ngFor="let dataSubHeaders1 of dataMain.subHeaders">
      <th colspan="5">{{dataSubHeaders1.text}}</th>
    </ng-container>
  </ng-container>
</tr>
<tr>
  <ng-container *ngFor="let dataMain of headers; let id2 = index">
    <ng-container *ngFor="let dataSubHeaders1 of dataMain.subHeaders">
      <ng-container *ngFor="let dataSubHeaders2 of dataSubHeaders1.subHeaders">
        <th [attr.colspan]="getColCount(dataSubHeaders2)"> {{dataSubHeaders2.text}} </th>
      </ng-container>
    </ng-container>
  </ng-container>
</tr>

This results in correct output but now I want to loop that code using recursion.So that I need not to loop over again and again.

Answer 2

if your array name is headers that come from component then your html look like :

<table class="table table-bordered text-center">
    <tr>
      <ng-container *ngFor="let dataMain of headers; let id = index">
          <th><span>{{dataMain.text}}</span></th>
      </ng-container>
    </tr>
    <tr>
      <ng-container *ngFor="let dataMain of headers; let id = index">
        <td>
          <table>
            <tr>
                <ng-container *ngFor="let dataSubHeaders1 of dataMain.subHeaders">
                    <th><span>{{dataSubHeaders1.text}}</span></th>
                </ng-container>
            </tr>
            <tr>
              <td *ngFor="let dataSubHeaders1 of dataMain.subHeaders">
                  <span  *ngFor="let dataSubHeaders2 of dataSubHeaders1.subHeaders">{{dataSubHeaders2.text}}|</span>
              </td>
            </tr>
          </table>    
        </td>
      </ng-container>
    </tr>
  </table>

Answer 3

I'm not familiar with Angular, but maybe this solution with simple javascript can give you an idea of how to implement it with Angular.

Please look at the following example

const headers = [
    {
        text: 'Lavere grads nivå',
        headerRange: 'B7:K7',
        headerRowIndex: 7,
        colCount: 10,
        subHeaders: [
            {
                text: 'Kvalifisert',
                headerRange: 'B8:F8',
                headerRowIndex: 8,
                colCount: 5,
                subHeaders: [
                    {
                        text: '2014',
                        headerRange: 'B9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2015',
                        headerRange: 'C9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2016',
                        headerRange: 'D9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2017',
                        headerRange: 'E9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2018',
                        headerRange: 'F9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    }
                ]
            },
            {
                text: 'Alle',
                headerRange: 'G8:K8',
                headerRowIndex: 8,
                colCount: 5,
                subHeaders: [
                    {
                        text: '2014',
                        headerRange: 'G9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2015',
                        headerRange: 'H9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2016',
                        headerRange: 'I9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2017',
                        headerRange: 'J9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2018',
                        headerRange: 'K9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    }
                ]
            }
        ]
    },
    {
        text: 'Integrert mastergrad/profesjon',
        headerRange: 'L7:U7',
        headerRowIndex: 7,
        colCount: 10,
        subHeaders: [
            {
                text: 'Kvalifisert',
                headerRange: 'L8:P8',
                headerRowIndex: 8,
                colCount: 5,
                subHeaders: [
                    {
                        text: '2014',
                        headerRange: 'L9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2015',
                        headerRange: 'M9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2016',
                        headerRange: 'N9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2017',
                        headerRange: 'O9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2018',
                        headerRange: 'P9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    }
                ]
            },
            {
                text: 'Alle',
                headerRange: 'Q8:U8',
                headerRowIndex: 8,
                colCount: 5,
                subHeaders: [
                    {
                        text: '2014',
                        headerRange: 'Q9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2015',
                        headerRange: 'R9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2016',
                        headerRange: 'S9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2017',
                        headerRange: 'T9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    },
                    {
                        text: '2018',
                        headerRange: 'U9',
                        headerRowIndex: 9,
                        subHeaders: null,
                        colCount: 0
                    }
                ]
            }
        ]
    }
];

const root = document.getElementById('root');
const table = document.createElement('table');
const thead = document.createElement('thead');
const row0 = document.createElement('tr');
const row1 = document.createElement('tr');
const row2 = document.createElement('tr');

table.border = '1px';

for (const header of headers) {
    const th0 = document.createElement('th');

    th0.textContent = header.text;
    th0.colSpan = header.colCount;

    row0.appendChild(th0);

    for (const subHeader of header.subHeaders) {
        const th1 = document.createElement('th');

        th1.textContent = subHeader.text;
        th1.colSpan = subHeader.colCount;

        row1.appendChild(th1);

        for (const subHeader1 of subHeader.subHeaders) {
            const th2 = document.createElement('th');

            th2.textContent = subHeader1.text;

            row2.appendChild(th2);
        }
    }
}

thead.appendChild(row0);
thead.appendChild(row1);
thead.appendChild(row2);
table.appendChild(thead);

root.appendChild(table);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="app.js"></script>
</body>
</html>

Answer 4

use ng-container. There is a similar question answered here.

Angular6 *ngFor table with objects in object