Как преобразовать входящие данные JSON в формат таблицы со строками и столбцами, где данные являются динамическими? - PullRequest
Новая
       20

Как преобразовать входящие данные JSON в формат таблицы со строками и столбцами, где данные являются динамическими?

0 голосов
/ 12 июня 2019 
[
    {
        "SerialNumber" : 1,
        "EmployeeName:" James
    },
    {
        "SerialNumber" : 2,
        "EmployeeName:" James2
    },
    {
        "SerialNumber" : 3,
        "EmployeeName:" James3
    }
]

У меня есть эти входящие данные JSON.Я хочу отобразить это в таблице, и для этого мне нужно расположить это в столбцах и строках.Имена столбцов здесь будут «SerialNumber» и «EmployeeName».Таким образом, соответствующие значения должны быть вставлены в соответствующие столбцы, когда я показываю эти данные в таблице.Как мне это сделать?Я собираюсь получить динамические данные.Поэтому в следующий раз, когда я получу данные json для какого-то другого файла, в нем может быть 10 столбцов с соответствующими данными.Как разделить данные, чтобы показать имена столбцов, а затем передать правильные данные в столбцы?

Пробное решение динамических столбцов PrimeNg с турбо-таблицей, но это не сработало.В этом случае я не буду знать заголовки столбцов заранее.Другими словами, заголовки столбцов не могут быть статическими, поскольку они полностью зависят от того, какие данные я получаю от API.Строка слева от двоеточия всегда будет именем столбца, а строка справа от двоеточия будет данными.

Ожидается, что всякий раз, когда я получаю динамические данные JSON, строкалевая часть двоеточия должна рассматриваться как заголовок столбца, а строка справа - как данные для конкретного столбца.Поэтому, перебирая эти данные json, я должен заполнять заголовки столбцов только один раз, а затем для каждой другой итерации должен продолжать заполнять данные в правильные столбцы.

Кроме того, учитывая, что заголовки столбцов будут меняться в зависимости отданные, как мне установить стиль этой таблицы?

введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Вот что я сделал. Сначала файл 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>
0 голосов
/ 12 июня 2019

Если для всех записей столбцы одинаковые, используйте код ниже 

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