Angular2 iterating through nested arrays with ngfor

Question

Am trying to use ngIf to loop through an array and create a table rows and columns for primeng2 but it fails

This is what i have tried.

I have an array of the form

            [
                [
                    "category",
                    2,
                    0
                ]
            ],
            [
                [
                    "Jul-2017",
                    0,
                    2
                ],
                [
                    "Aug-2017",
                    0,
                    2
                ]
            ],
            [
                [
                    "Reg-Jul-2017",
                    0,
                    0
                ],
                [
                    "Rej-Jul-2017",
                    0,
                    0
                ],
             ....aug here in similar as jul
      ]

SO what am trying to have is

     <p-row>
        <p-column header="category" colspan="2"></p-column>
    </p-row>
    <p-row>
        <p-column header="July-2017" colspan="2"></p-column>
        <p-column header="Aug-2017" colspan="2"></p-column>
    </p-row>
    <p-row>
        <p-column header="Reg-Jul-2017"></p-column>
        <p-column header="Rej-Jul-2017"></p-column>
        <p-column header="Reg-Aug-2017"></p-column>
        <p-column header="Rej-Aug-2017"></p-column>
    </p-row>

so i have tried

in my ts
  colheaders:any[] = [];

  onfetchdata(){  //fetch from http then from http service get res.json()

    this._reportService.getTabularRows()
       .subscribe(
          res=>{
            this.colheaders = res;
            console.log(res)//produces above data
           }
       )

}

In the html i have

   <p-row *ngFor="let rowval of colheaders;let idx = index">
    <p-column *ngFor="let newitem of rowval[idx]" [header]="newitem[0]" [rowspan]="newitem[1]" [colspan]="newitem[2]">

    </p-column>
  </p-row>

But the above doesnt work. Where am i going wrong sice my columns arent rendered as expected?

Answer 1

I don't want to do your work, but you can debug this using the json pipe:

<p-row *ngFor="let rowval of colheaders;let idx = index">
  {{rowval | json}}
  <p-column *ngFor="let newitem of rowval[idx]" [header]="newitem[0]" [rowspan]="newitem[1]" [colspan]="newitem[2]">
      {{newitem | json}}
  </p-column>
</p-row>

Now you can see what data is in your loops.