how to loop through data in angular?

Question

I am trying to create following table using below json structure.

{"status":200,"message":"success","result":{"report":[["SOUTH","ANDHRA-PRADESH","ITR",0.0000,0.0000,null,229.9800,0.0000],
["SOUTH","ANDHRA-PRADESH","OPC",84490.0000,6426.2000,0.0000,7183.7800,77306.0000]
]}}

Expected Result ::

sample code which i have tried so far. Help for the same is highly appreciated... Thanks in advance https://stackblitz.com/edit/angular-mp1jro?file=src%2Fapp%2Fapp.component.ts

<table style="border:1px solid #CCC">
  <thead>
      <tr>
          <th rowspan="2">Zn</th>
          <th rowspan="2">P Name</th>
        <ng-container *ngFor="let unique of arr">
          <th rowspan="1" colspan="4">{{unique.grade}}</th>
        </ng-container>
      </tr>
      <tr>
          <th>I</th>
          <th>II</th>
          <th>III</th>
          <th>IV</th>
          <th>V</th>
          <th>VII</th>
          <th>VIII</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let hero of result.report;let i = index">
          <td>{{hero[0]}}</td>
          <td>{{hero[1]}}</td>
          <td>{{hero[3]}}</td>
          <td>{{hero[4]}}</td>
          <td>{{hero[5]}}</td>
          <td>{{hero[6]}}</td>
       </tr>
      
  </tbody>
</table>

I need to display IRT and OPC column based on condition which is not working?.. based on IRT or OPC , it has to show data into respective column.its displaying in IRT only. — user3239587
– user3239587, Commented Aug 18, 2021 at 9:31

Eliseo · Accepted Answer · 2021-08-18 09:52:45Z

3

When the json has nothing with the image it's difficult help :(. I imagine you can transform your structure some like

this.data:any[]=[]
this.result.report.forEach(x=>{
   let element=this.data?this.data.find(d=>d.name==x[0] && d.zone==x[1]):null
   if (!element)
   {
       const index=this.data.length;
       this.data.push({name:x[0],zone:x[1]})
       element=this.data[index]
   }
   element[x[2]]=[x[3],x[4],x[5],x[6],x[7]]
})

So you has an array of object like

{name:...,zone:...,ITR:[...],OPC:[...]}

And you can create the table more simple

answered Aug 18, 2021 at 9:52

Eliseo

58.8k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3239587 Over a year ago

Still i have same issue while looping it. pls check here stackblitz.com/edit/…

Eliseo Over a year ago

I thought that all your data has ITR,OPC.... futhermore, I think that if you send a ITC or OPC send 5 elements. You has 7 columns, 4 for ITC and 3 for OPC. I don't know what values are this columns in your original data. BTW, you can use some like *ngFor="let p of (hero.ITR||['','','','']) if the element not has "ITR" to create 4 empty cells

Collectives™ on Stack Overflow

how to loop through data in angular?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related