ngFor For complicated json

user_11695747 0
Viewed 108

I have following JSON data and using *ngFor in Angular 7 need to display data in tabular format.

 <table class="table">
<tbody>
    <tr>
      <th></th>
        <td>java</td>
        <td>.Net</td>
        <td>Integration</td>
    </tr>
    <tr>
      <th>A1</th>
        <td>20</td>
        <td>30</td>
        <td>30</td>
    </tr>
     <tr>
      <th>B1</th>
        <td>100</td>
        <td>300</td>
        <td>200</td>
    </tr>
   <tr>
      <th>c1</th>
        <td>200</td>
        <td>300</td>
        <td>309</td>
    </tr>
</tbody>

Here is the JSON 

[
   {
       "grade":"A1",
       "data":{
        ".Net" :"6",
        "Java":"7",
        "Integration":"7"
     }

},
{
    "grade":"B1",
       "data":{
        ".Net" :"12",
        "Java":"70",
        "Integration":"56"
     }
    }
 ]
angular7 ngfor angular json
3 Answers

You can create your table headers array using one of your JSON array object as below.

export class AppComponent  {
  thFields: any = [];
  data = [
    {
      "grade": "A1",
      "data": {
        ".Net": "6",
        "Java": "7",
        "Integration": "7"
      }
    },
    {
      "grade": "B1",
      "data": {
        ".Net": "12",
        "Java": "70",
        "Integration": "56"
      }
    }];
    constructor () {
      this.createHeaderFileds();
    }

    createHeaderFileds(): void {
      for (let key in this.data[0].data) {
        this.thFields.push(key);
      }
    }
}

You can do this using above created thFields and KeyValuePipe as follows.

<table class="table">
<tbody>
    <tr>
  <td *ngFor="let header of thFields">{{header}}<td>
</tr>
    <tr *ngFor="let item of data">
      <th>{{item.grade}}</th>
        <td *ngFor="let sub of item.data | keyvalue">{{sub.value}}</td>
    </tr>
</tbody>

Find Working StackBlitz Demo Here.

user_88503970

If you want to do it dynamically, you can create a formatted array having the points in an array.

Try like this:

TS:

  data = [
    {
      "grade": "A1",
      "data": {
        ".Net": "6",
        "Java": "7",
        "Integration": "7"
      }

    },
    {
      "grade": "B1",
      "data": {
        ".Net": "12",
        "Java": "70",
        "Integration": "56"
      }
    }
  ]
  formattedData:any = []
  columnHeaders: string[] = []


  ngOnInit() {
    this.columnHeaders = Object.keys(this.data[0].test)

    this.data.forEach(element => {
      let row = {
        grade:element.grade,
        points : Object.keys(element.test).map(key => element.test[key])
      }
      this.formattedData.push(row)
    }); 
  }

HTML:

<table class="table">
  <tbody>
    <tr>
      <th></th>
      <td *ngFor="let item of columnHeaders">{{item}}</td>
    </tr>
    <tr *ngFor="let item of formattedData">
      <th>{{item.grade}}</th>
      <td *ngFor="let point of item.points">{{point}}</td>
    </tr>
  </tbody>
</table>

If you want to use keyValue, don't use the formattedData at all and do this:

<table class="table">
  <tbody>
    <tr>
      <th></th>
      <td *ngFor="let item of data[0].test | keyvalue">{{item.key}}</td>
    </tr>
    <tr *ngFor="let item of data">
      <th>{{item.grade}}</th>
        <td *ngFor="let sub of item.test | keyvalue">{{sub.value}}</td>
    </tr>
  </tbody>
</table>
user_76031090 
<table>
    <tr>
    <th></th>
        <th>java</th>
        <th>.Net</th>
        <th>Integration</th>
    </tr>
    <tr *ngFor="let o of obj">
        <th>{{o.grade}}</th>
        <td>{{o.data['.Net']}}</td>
        <td>{{o.data['Java']}}</td>
        <td>{{o.data['Integration']}}</td>
    </tr>
</table>
user_90335550
Related