From nested JSON to table with rowspan Angular

Question

I tried to make a table with my nested JSON get from an api. I don't know how to dynamically merge my cells when necessary knowing that my JSON can be nested up to 6 or 7 times.

What I want :
Table I want

What I got :
Table I got

My TS file :

 questionnaire = [
    {
      title : "theme1",
      children : [{
      title : "theme2",
         children : [
         {
           title : "theme3",
           children : []
         },
         {
           title : "theme4",
           children : []
         },
       ]
     }]
   },
   {
     title : "theme5",
     children : [
       {
         title : "theme6",
         children : []
       },
       {
         title : "theme7",
         children : []
       },
     ]
   },
 ]

My component.html :

<ng-container *ngFor="let periode of questionnaire">
    <br>
    <table>
      <tr>
        <td>{{ periode.title }}</td>
        <td *ngFor="let theme of periode.children">
          {{ theme.title }}
        </td>
      </tr>
    </table>
  </ng-container>

Answer 1

Generating your tables via a recursive function and then setting the restulting HTML via [innerHTML] would be a good call.

The recursive function would need not only return its corresponding HTML part of the table but also how many rows it contains. That way you can utilise the rowspan Attribute whenever there are children.