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

Question

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

I have this incoming JSON data. I want to display it into a table and in order to do that I will need to arrange this in columns and rows. The column names here will be 'SerialNumber' and 'EmployeeName'. So the corresponding values should get inserted in the respective columns when i show this data in the table. How do I do this? I am going to get dynamic data. So the next time i get json data for some different file, it may have 10 columns in it with respective data. How to split the data to show the column names and then feed the correct data into the columns?

Tried PrimeNg turbo table dynamic column solution but that didn't work. In this case I am not going to know the column headings in advance. In other words, the column headings cannot be static since it completely depends on what data I get back from the API. The string on the left of the colon is always going to be the column name and the string to the right of the colon will be the data.

The expectation is that whenever I get dynamic JSON data, the string to the left of colon should be treated as column heading and the string to the right should be treated as the data for the specific column. So while iterating over this json data, i should populate the column headings just once and then for every other iteration i should keep populating the data into the correct columns.

Also, given that the column headings will change based on the data, how do I set the styling of this table?

enter image description here

Answer 1

If for all records the columns are same then use the below code

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

If the columns can be different on each row and you want the aggregation of columns use this code

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

Here is what I did. First the TS file and then the HTML code.

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

Inside 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>