How to pass data received from service to angular datatable

Question

I have just started working on Angular 4 and I am trying to render some data which I receive from angular service in json format, into angular-datatable, but whichever option i try its not working for me. The table is coming, the columns are coming, however the data inside the columns are not displaying.

Any help would be great,

Thanks in advance..!!!!

Please find my code below:

component.html

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

component.ts

import { Component, OnInit } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { Subject } from 'rxjs/Subject';

@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements OnInit {

  private fleetData: any;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();
  constructor(private getFleetData:FleetDataService) { }

  ngOnInit() {
     this.getFleetData.getFleetData().subscribe(
     fleetData => {
       this.fleetData = fleetData;
       console.log(this.fleetData);
       this.dtTrigger.next();
    },
    err => {
     console.log(err);
    }
 );
 this.dtOptions = {
   pagingType: 'full_numbers',
   columns: [{
     title: 'First Name',
     data: this.fleetData
   }, {
     title: 'Last Name',
     data: this.fleetData
   }, {
     title: 'Score',
     data: this.fleetData
   }]
  };
 }
}

component.service

import { Injectable } from '@angular/core';
import { HttpModule, Http, Response, Headers, RequestOptions } from 
'@angular/http';
import { Observable } from 'rxjs/Rx';


@Injectable()
export class FleetDataService {

 constructor(private http: Http) { }

 getFleetData() {
   return this.http.get("../../assets/data/test.json")
     .map((res:Response) => res.json())
     .catch((error:any) => Observable.throw(error.json().error || 'Server 
   Error'));
 }

}

test.json

  [{
    "FirstName": "Jill",
    "LastName": "Smith",
    "Score": "disqualified"
  }, {
    "FirstName": "Eve",
    "LastName": "Jackson",
    "Score": "94"
  }, {
    "FirstName": "John",
    "LastName": "Doe",
    "Score": "80"
  }, {
    "FirstName": "Adam",
    "LastName": "Johnson",
    "Score": "67"
 }]

Answer 1

You set your dtOptions outside the subscribe.

If you do this the fleetData stays empty so dtOptions is never set correctly, because an Observable is asynchronous. I propose this code:

export class DashboardComponent implements OnInit {

  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private getFleetData:FleetDataService) { }

  ngOnInit() {
     this.getFleetData.getFleetData().subscribe(
     fleetData => {
       console.log(fleetData);
       this.buildDtOptions(fleetData)
       this.dtTrigger.next();
    },
    err => {
     console.log(err);
    });
  }

  private buildDtOptions(fleetData: any): void {
    this.dtOptions = {
         pagingType: 'full_numbers',
         columns: [
           {title: 'First Name', data: fleetData}, 
           {title: 'Last Name', data: fleetData}, 
           {title: 'Score', data: fleetData}
         ]
    };
  }
 }

For this error: ERROR TypeError: Cannot read property 'aDataSort' of undefined. You can do a spinner (ngIf / else) in the view and when data are loaded you display the datatable