ngFor Для сложных JSON

Question

У меня есть следующие данные JSON, и при использовании *ngFor в Angular 7 необходимо отображать данные в табличном формате.

 <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>

Вот JSON

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

},
{
    "grade":"B1",
       "data":{
        ".Net" :"12",
        "Java":"70",
        "Integration":"56"
     }
    }
 ]

Answer 1

Вы можете создать свой массив заголовков таблиц, используя один из объектов массива JSON, как показано ниже.

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);
      }
    }
}

Вы можете сделать это, используя созданные выше thFields и KeyValuePipe следующим образом.

<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>

Найти рабочий Демонстрация StackBlitz Здесь.

Answer 2

Если вы хотите сделать это динамически, вы можете создать отформатированный массив с точками в массиве.

Попробуй так:

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>

Если вы хотите использовать keyValue , вообще не используйте formattedData и сделайте следующее:

<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>

Answer 3

<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>