如何将传入的 JSON 数据转换为具有动态行和列的 table 格式？

Question

[
    {
        "SerialNumber" : 1,
        "EmployeeName:" James
    },
    {
        "SerialNumber" : 2,
        "EmployeeName:" James2
    },
    {
        "SerialNumber" : 3,
        "EmployeeName:" James3
    }
]

我有这个传入的 JSON 数据。我想将它显示到 table 中，为此我需要将其排列成列和行。此处的列名称将为 'SerialNumber' 和 'EmployeeName'。因此，当我在 table 中显示此数据时，应将相应的值插入到相应的列中。我该怎么做呢？我要获取动态数据。因此，下次我获取某个不同文件的 json 数据时，它可能有 10 列以及相应的数据。如何拆分数据以显示列名，然后将正确的数据输入到列中？

尝试了 PrimeNg turbo table 动态列解决方案，但没有用。在这种情况下，我不会提前知道列标题。换句话说，列标题不能是静态的，因为它完全取决于我从 API 得到的数据。冒号左边的字符串始终是列名，冒号右边的字符串是数据。

期望每当我获得动态 JSON 数据时，冒号左侧的字符串应被视为列标题，而右侧的字符串应被视为特定列的数据。因此，在遍历此 json 数据时，我应该只填充一次列标题，然后对于每一次迭代，我应该继续将数据填充到正确的列中。

此外，鉴于列标题会根据数据发生变化，我该如何设置此 table 的样式？

enter image description here

Answer 1

如果所有记录的列都相同，则使用以下代码

const data = [
        {
            "SerialNumber" : 1,
            "EmployeeName": "James"
        },
        {
            "SerialNumber" : 2,
            "EmployeeName": "James2"
        },
        {
            "SerialNumber" : 3,
            "EmployeeName": "James3"
        }
    ];
    
    const columns = data && data.length ? Object.keys(data[0]) : [];
    console.log(columns);

如果每行的列可以不同，并且您希望聚合列，请使用此代码

data = [
        {
            "SerialNumber" : 1,
            "EmployeeName": "James"
        },
        {
            "SerialNumber" : 2,
            "EmployeeLastName": "James2"
        },
        {
            "PhoneNumber": 7647,
            "EmployeeName": "James3"
        }
    ];
   
      const columns = data && data.length ? 
          data.reduce((cols, item) => { 
                Object.keys(item).forEach(key => {
                    if (!cols.includes(key)) { cols.push(key);}
                });
    
                return cols;
           }, []) : [];
      console.log(columns);

Answer 2

这是我所做的。首先是 TS 文件，然后是 HTML 代码。

 getFileData() {
        this.columnName = [];
        this.columnData = [];

        this.someService.getFile(this.clientFile).subscribe(
            (res: any) => {
                if (res.data) {
                    this.fileData = res.data;
                    this.columnName = this.fileData[0];

                    if (res.data.length > 0) {
                        this.columnName = Object.keys(res.data[0]);
                    }

                    let colData: any[] = [];
                    if (res.data.length > 0) {
                        for (let i = 0; i < this.fileData.length - 1; i++) {
                            colData = Object.values(res.data[i]);
                            this.columnData.push(colData);
                        }
                    }
                }
            },
            err => {
                let someMsg = 'Error processing file';
                if (err.status === 409) {
                    someMsg=
                        err.error.error.errorMessage.length > 0
                            ? err.error.error.errorMessage
                            : someMsg;
                }
                this.toastService.error(someMsg);
            }
        );
    }

里面HTML -->

<p-table
                #uploadedFileData
                [value]="columnData"
                [style]="{
                    'overflow-y': 'scroll',
                    'overflow-wrap': 'break-word',
                    'padding-bottom': '15px'
                }"
                overflow="auto"
                selectionMode="multiple"
                [loadingIcon]="'fa-spinner'"
                [loading]="loadingResults"
                [paginator]="false"
                [columns]="columnName"
                [(selection)]="columnData"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th *ngFor="let col of columnName">
                            {{ col }}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-row>
                    <tr>
                        <td *ngFor="let col of row">
                            {{ col }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>

如何将传入的 JSON 数据转换为具有动态行和列的 table 格式？

How to convert incoming JSON data into table format with rows and columns where the data is dynamic?

typescript

primeng-turbotable

angular7