Convert given array to an HTML table in angular

Question

Using angular 15 I have below array

header:any =['id','cid','NAME,'code','unit']
data: any = [
['2','110005001','abc test','0','NA'],
['2','110005001','abc test','0','NA'],
['2','110005001','abc test','0','NA']

]

I want to convert this to an html table data I tried below html code but its not working

 this.data.forEach((lec) => {
      console.log(lec);
      this.Data.push({
        viewValue: lec,
        value: lec,
      });
    });
 <tr *ngFor="let r of Data">
 <td  >{{ r.value }}</td>

This gives output of one td taking all data with commas. How to get the values correctly to an html table

Answer 1

Your data is a nested array. You need the nested *ngFor to iterate each value in the array.

<tr *ngFor="let r of data">
  <ng-container *ngFor="let value of r">
    <td>{{ value }}</td>
  </ng-container>
</tr>

If you look for a solution converting the values array into a set of objects:

this.actualTableData = this.data.map((x) => {
  let obj: { [key: string]: string } = {};

  for (let i = 0; i < this.header.length; i++) {
    obj[this.header[i]] = x[i];
  }

  return obj;
});

<tr *ngFor="let r of actualTableData">
  <ng-container *ngFor="let h of header">
    <td>{{ r[h] }}</td>
  </ng-container>
</tr>

Demo @ StackBlitz