Создать динамическую таблицу на основе JSON в угловых 5

Question

Можно ли создать динамическую таблицу (динамические столбцы) на основе объекта JSON с Angular 5?Если да, то как?

В ответ API я получаю следующий json:

{
    "ResponseStatus": true,
    "ResponseData": [
        {
            "Parent": "Company 1",
            "Data": [
                {
                    "Field1": "Membership 1",
                    "Field2": "153.00"
                },
                {
                    "Field1": "Membership 2",
                    "Field2": "130.00"
                },
                {
                    "Field1": "Membership 3",
                    "Field2": "1850.00"
                }
            ]
        },
        {
            "Parent": "Company 2",
            "Data": [
                {
                    "Field1": "Membership 1",
                    "Field2": "148.00"
                },
                {
                    "Field1": "Membership 2",
                    "Field2": "100.00"
                },
                {
                    "Field1": "Membership 4",
                    "Field2": "1800.00"
                }
            ]
        }
    ]
}

Теперь я хочу создать таблицу на основе этих данных, которая должна быть:

+------------------+------------------+------------------+
| Membership Type  |    Company 1     |    Company 2     |
+------------------+------------------+------------------+
|  Membership 1    |      153.00      |      148.00      |
+------------------+------------------+------------------+
|  Membership 2    |      130.00      |      100.00      |
+------------------+------------------+------------------+
|  Membership 3    |      1850.00     |                  |
+------------------+------------------+------------------+
|  Membership 4    |                  |     1800.00      |
+------------------+------------------+------------------+

ПРИМЕЧАНИЕ: Количество компаний может быть другим.

Каков наилучший подход для решения этой проблемы?Я просто не могу понять, как решить эту проблему?Любая помощь очень ценится.

Здесь я играю с таким кодом, как:

 ngOnInit() {

        this.headers = this.Testdata.map(t => t.Parent);
        this.Testdata.forEach(x => {
          x.Data.forEach(y => y['Parent'] = x.Parent)
        })

        var data = this.Testdata.map(t => t.Data);

       var temp = [];

       data.forEach(function(a) {
          temp.push(a.map(function (t) {
            let c = {};
            c['Field1'] = t.Field1;
            c[t['Parent']] = t.Field2;
            return c;
          }));
        });

        var rowList = temp.flat();
    }




    <table>
          <thead>
            <tr>
              <td *ngFor="let col of headers">{{col}}</td>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let row of rowData">
              <td>{{row.Field1}}</td>
              <td *ngFor="let col of headers">
                {{row[col]}}
              </td>
            </tr>
          </tbody>
        </table>

Answer 1

Может быть, прежде чем вставить что-либо в таблицу, преобразуйте json в массив пользовательского объекта, который вы можете объявить в том же файле .ts:

export class CustomObject {
  id :string;
  company1 :string;
  company2 :string;
}

list: CustomObject [] = [];

Затем внутри основного класса объявите список и выполните итерации по вашему json, сравнивая значение id (MembershipType).Если новый membersType соответствует другому, который уже находится в массиве, добавьте значение company1 или company2, иначе «push element as CustomObject».Я надеюсь, что вы можете написать этот код только для двух вложенных Для чтения JSON:)