title: Angular2 TypeError: val.slice is not a function. Issue with Primeng datatable & nested data
body: <p>I am trying to use primeng dataTable. In which I am loading nested JSON in "jsonArray" given below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
    "person_name": "Gaurav",
    "personal_details":[{
      "last_name":"patel",
      "age":24
    }],
    "technical_details":[{
      "roll_no":1,
      "branch":"IT"
    }]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//app.component.ts
  import { Component } from '@angular/core';
  import { AppService } from './app.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    jsonArray: any[]=[];
    constructor(public AppSVC: AppService) { }
  
    ngOnInit() {
  
      this.AppSVC.getAppontmentJson().subscribe(res =&gt; {
        if (!res.error_status) {
          this.jsonArray = res;
        }
      });
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//app.component.html
  &lt;p-dataTable [value]="jsonArray" reorderableColumns="true"&gt;
    &lt;p-column header="Last Name" field="personal_details.last_name"&gt;&lt;/p-column&gt;
    &lt;p-column header="Age" field="personal_details.last_name"&gt;&lt;/p-column&gt;
  &lt;/p-dataTable&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when I run the code, it shows an error: </p>
  
  <p><strong>ERROR TypeError: val.slice is not a function</strong></p>
  
  <p>And I am new to angular 2</p>