Nested data in datatable

[amalepati]

This is my json data structure:
{
"id": 1,
"race_location": "Charlotte-Fall",
"year": null,
"mec_date": null,
"nxs_date": null,
"ctws_date": null,
"event_details": {
"titans": {
"required": 5,
"drivers": [
"Andrew James Fisher"
],
"trailers": [
"T-8"
],
"count": 1,
"vehicles": [
"C-16"
]
},
"coaches": {
"required": 3,
"drivers": [],
"trailers": [],
"count": 0,
"vehicles": []
},
"nxs": {
"required": 4,
"drivers": [
"Todd Michael Bixby",
"David Alan Vestal",
"Mark A Hadley",
"Bryan L Kleinsasser"
],
"trailers": [
"T-24",
"T-35",
"AT-4",
"T-29"
],
"count": 4,
"vehicles": [
"C-38",
"C-30",
"C-21",
"C-37"
]
},
"wheels": {
"required": 4,
"drivers": [],
"trailers": [],
"count": 0,
"vehicles": []
},
"cups": {
"required": 13,
"drivers": [
"David Andrew Charest"
],
"trailers": [
"T-4"
],
"count": 1,
"vehicles": [
"C-48"
]
},
"tvs": {
"required": 2,
"drivers": [
"Robin Eugene Angle",
"Christopher Alan Beach"
],
"trailers": [
"F-6",
null
],
"count": 2,
"vehicles": [
"C-40",
"C-44"
]
}
}
},

component.ts:

export class RacescheduleComponent implements OnInit {
races: any[]=[];
selectedRace: null;
errorMessage: string;

public constructor(private eventService: EventService, private router: Router) { }

ngOnInit() {
this.eventService.getList('race_schedule')
.subscribe(races => {
var races_ = [];
this.races = races.map((race) => {
var progress = 0;

if (race.event_details.cups.count >= race.event_details.cups.required) {
progress += 16.6 ;
}
if (race.event_details.nxs.count >= race.event_details.nxs.required) {
progress += 16.6 ;
}
if (race.event_details.titans.count >= race.event_details.titans.required) {
progress += 16.6 ;
}
if (race.event_details.tvs.count >= race.event_details.tvs.required) {
progress += 16.6 ;
}
if (race.event_details.wheels.count >= race.event_details.wheels.required) {
progress += 16.6 ;
}
if (race.event_details.coaches.count >= race.event_details.coaches.required) {
progress += 16.6 ;
}
race.total_progress = progress;
return race;
});
}, error => this.errorMessage = <any>error);
}

selectRace(e) {
this.selectedRace = e.data;
}

}

component.html

<div id="wrapper" class="container">
<app-navbar></app-navbar>
<div style="margin: 70px auto;width:100%">
<h1>Race Schedule</h1>
<h5>Click a race to view details</h5>
<p-dataTable [value]="races" scrollable="true" scrollHeight="500px" selectionMode="single" (onRowClick)="selectRace($event)">
<p-header>Races</p-header>
<p-column field="race_location" header="Race Location" [style]="{'width':'150px'}"></p-column>
<p-column field="total_progress" header="Schedule Completion Status (%)" [style]="{'width':'150px'}">
</p-column>
</p-dataTable>

<div *ngIf="selectedRace" class="table-responsive" style="overflow:auto">
<h3> <i class="fa fa-flag-checkered fa-2x"></i> {{ selectedRace.race_location}}</h3>
<p-dataTable [value]="selectedRace">
<p-header>Races</p-header>
<p-column field="event_details.nxs.drivers" header="Driver" [style]="{'width':'150px'}"></p-column>
<p-column field="event_details.nxs.vehicles" header="Schedule Completion Status (%)" [style]="{'width':'150px'}">
</p-column>
</p-dataTable>
</div>
</div>
</div>

This returns an error that says "ERROR TypeError: val.slice is not a function. This is due to the second datable that is displayed when the row of the first one is clicked. But if i use a regular html table as below, it works.

<table class="table table-striped">
<thead>
<tr class="info">
<th>Driver</th>
<th>Tractor</th>
<th>Trailer</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let driver of selectedRace.event_details.cups.drivers; index as i">
<td>{{ driver }}</td>
<td>{{ selectedRace.event_details.cups.vehicles }}</td>
<td>{{ selectedRace.event_details.cups.trailers }}</td>
</tr>
</tbody>
</table>

Can someone help me with the right way to define the second table?

[merve7]

Please ,can you create plunker example (http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=preview)?

[sudheer]

It is very difficult to read the above code snippets. Please use plunker example. Also, look at the Nested JSON structure usage in datatable here (if it helps) http://sudheerjonna.com/blog/2017/07/06 ... datatable/