如何在 angular 的primeng 表中显示嵌套的 json 数据

Question

I want to display my nested json data into my prime ng table, but I am facing an issue that when I am calling the data through the http service, its an object form and when I display it directly into table it gives me [object][object].

The way I want to display the data is that suppose I have a json like this, in a single row I want to print the whole nested json with key and value seperate

{{item.key}} and {{item.value}}.

Anything we can do make a function and return the key and value and print it in table. Something like this

    {"hits":[
  {
    "cardetails": {
    "carname":"abc",
    "cartype":"metal",
    "carnumber": "4444"
    }
  },
  {
    "cardetails": {
    "carname":"cde",
    "cartype":"alumnium",
    "carnumber": "1212"
  }
  }
]}

my.ts file

  ngOnInit() {
     this.carservice.getcardata().subscribe(carservice => {
     this.tables = carservice
     console.log(this.tables);
     this.formatted=(this.tables.hits)
     console.log(this.formatted)//here this is my json object

  }

    this.cols = [
      { field: ''},
      { field: 'cardetails'},
      { field: ''},

  ];


  this.data.length < this.rows ? this.temDataLength = this.data.length : this.temDataLength = this.rows;
  }

  expandAll() {
    if(!this.isExpanded){
      this.data.forEach(data =>{
        this.expandedRows[data.time] = 1;
      })
    } else {
      this.expandedRows={};
    }
    this.isExpanded = !this.isExpanded;
  }
  onRowExpand() {

    console.log("row expanded", Object.keys(this.expandedRows).length);
    if(Object.keys(this.expandedRows).length === this.temDataLength){
      this.isExpanded = true;
    }
  }

  onRowCollapse() {

    console.log("row collapsed",Object.keys(this.expandedRows).length);
    if(Object.keys(this.expandedRows).length === 0){
     this.isExpanded = false;
    }
  }
}

.html file

<p-table  [columns]="cols" dataKey="speed" [value]="cars" (onPage)="onPage($event)"
            (onRowExpand)="onRowExpand()" (onRowCollapse)="onRowCollapse()" 
            [expandedRowKeys]="expandedRows" [rowExpandMode]='single' [resizableColumns]="true">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width: 24px;background-color:#2F4A6A;">
                </th>
                <th style="width:7em;background-color:#2F4A6A;color:white;width:85px;height:33px;font-size:12px;text-align:left"><span>cars ranking</span>
                 </th>
                <th style="background-color:#2F4A6A;color:white;width:600px;height:33px;padding:8px;font-size:12px;text-align:left"><span>Car Detail in a single row</span>
                </th>
                <th style="width: 24px;background-color:#2F4A6A;" ></th>
            </tr>
        </ng-template>
        <ng-template let-rowIndex="rowIndex"  pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns" let-index>
            <tr>
                <td>
                    <a href="#" [pRowToggler]="rowData">
                        <i  style="color:black;font-size:14px;"[ngClass]="expanded ? 'pi pi-caret-down ': 'pi pi-caret-right'"> </i></a>
                </td>
                <td *ngFor="let col of cols">
                <div *ngIf="col.field==source;then nested_object_content else normal_content"></div>
                    <ng-template #nested_object_content>
                            {{rowData[col.field.key]}} -- {{rowData[col.field.value]}}
                    </ng-template>
                    <ng-template #normal_content>
                            {{rowData[col.field]}}
                    </ng-template>
                </td>
            </tr>
        </ng-template>

      </p-table>

Answer 1

I would recommend you to parse the JSON in-plane object format before assigning it to the table. With that JSON structure, even if you achieve with nested object, you may have to override a few table functionality like searching, sorting, etc. That will lead to unnecessary issues and cause performance issues. Better convert your data into flat formate. It will be easy and plain implementation.

Please read the below question thread, similar problems cause some of the basic implementation issues on T-table.

T-table With Nested object