时间戳

首页 > 解决方案 > 在 Angular 5 中创建基于 JSON 的动态表

javascript - 在 Angular 5 中创建基于 JSON 的动态表

问题描述

是否可以使用 Angular 5 基于 JSON 对象创建动态表（动态列）？如果有怎么办？

我得到以下 json 作为 API 的响应：

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

标签： javascriptjsonangularangular5

解决方案

也许在向表中插入任何内容之前，将 json 转换为您可以在同一个 .ts 文件中声明的自定义对象的数组：

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

列表：自定义对象 [] = [];

然后在主类中声明一个列表并遍历您的 json，比较 id(MembershipType) 的值。如果新的membershipType 与数组中已经存在的另一个匹配，则添加company1 或company2 的值​​，否则“将元素推送为CustomObject”。我希望你可以在阅读 json 时编写这段代码只是两个嵌套的 For :)

推荐阅读