title: How To display nested json data in primeng table in angular 7
body: <p>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].</p>
  
  <p>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</p>
  
  <p>{{item.key}} and {{item.value}}.</p>
  
  <p>Anything we can do make a function and return the key and value and print it in table. Something like this</p>
  
  <pre><code>    {"hits":[
    {
      "cardetails": {
      "carname":"abc",
      "cartype":"metal",
      "carnumber": "4444"
      }
    },
    {
      "cardetails": {
      "carname":"cde",
      "cartype":"alumnium",
      "carnumber": "1212"
    }
    }
  ]}
  </code></pre>
  
  <p>my .ts file</p>
  
  <pre><code>
    ngOnInit() {
       this.carservice.getcardata().subscribe(carservice =&gt; {
       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 &lt; this.rows ? this.temDataLength = this.data.length : this.temDataLength = this.rows;
    }
  
    expandAll() {
      if(!this.isExpanded){
        this.data.forEach(data =&gt;{
          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;
      }
    }
  }
  </code></pre>
  
  <p>.html file</p>
  
  <pre><code>&lt;p-table  [columns]="cols" dataKey="speed" [value]="cars" (onPage)="onPage($event)"
              (onRowExpand)="onRowExpand()" (onRowCollapse)="onRowCollapse()" 
              [expandedRowKeys]="expandedRows" [rowExpandMode]='single' [resizableColumns]="true"&gt;
          &lt;ng-template pTemplate="header" let-columns&gt;
              &lt;tr&gt;
                  &lt;th style="width: 24px;background-color:#2F4A6A;"&gt;
                  &lt;/th&gt;
                  &lt;th style="width:7em;background-color:#2F4A6A;color:white;width:85px;height:33px;font-size:12px;text-align:left"&gt;&lt;span&gt;cars ranking&lt;/span&gt;
                   &lt;/th&gt;
                  &lt;th style="background-color:#2F4A6A;color:white;width:600px;height:33px;padding:8px;font-size:12px;text-align:left"&gt;&lt;span&gt;Car Detail in a single row&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th style="width: 24px;background-color:#2F4A6A;" &gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
          &lt;ng-template let-rowIndex="rowIndex"  pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns" let-index&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;a href="#" [pRowToggler]="rowData"&gt;
                          &lt;i  style="color:black;font-size:14px;"[ngClass]="expanded ? 'pi pi-caret-down ': 'pi pi-caret-right'"&gt; &lt;/i&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td *ngFor="let col of cols"&gt;
                  &lt;div *ngIf="col.field==source;then nested_object_content else normal_content"&gt;&lt;/div&gt;
                      &lt;ng-template #nested_object_content&gt;
                              {{rowData[col.field.key]}} -- {{rowData[col.field.value]}}
                      &lt;/ng-template&gt;
                      &lt;ng-template #normal_content&gt;
                              {{rowData[col.field]}}
                      &lt;/ng-template&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/ng-template&gt;
  
        &lt;/p-table&gt;
  
  </code></pre>