How to pass json data received from service to an array in component in angular material for angular 4

Question

I am new to Angular 4 and angular material and i am trying to add the angular material data table with http, pagination, sorting and filtering into my dashboard component, With

Answer 1

I guess you are confused with two different ways to load data in the table. From the looks of your component.service, specifically 'FleetDataService' class, you are trying to get and Observable response. The correct way could be as below, for component.ts:

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements AfterViewInit {
  fleetData = null;
  dataSource = new MatTableDataSource(this.fleetData);
  displayedColumns = ['First Name', 'Last Name', 'Score'];

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults 
    to lowercase matches
    this.dataSource.filter = filterValue;
  }
  constructor(private getFleetData: FleetDataService, private loaderService: 
   LoaderService) { 
   getFleetData.getFleetData().subscribe(
   data => {
    this.fleetData = data;
    this.dataSource.data = this.fleetData;  
   });
   }
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
    }
  }

Similarly in the above example, what you are trying , can be done in another way, as shown below:

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent implements AfterViewInit {

  displayedColumns = ['First Name', 'Last Name', 'Score'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults 
    to lowercase matches
    this.dataSource.filter = filterValue;
  }
  constructor(private getFleetData: FleetDataService, private loaderService: 
   LoaderService) { }
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
    }
  }

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

Also I see lot of problems in your code. I hope you did not miss anything for MatPaginator and MatSort.