Question

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

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

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

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

此外，鉴于列标题将根据数据而变化，我该如何设置该表的样式？

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数据转换为具有动态数据行和列的表格式？

2 个答案: