title: How to pass json data received from service to an array in component in angular material for angular 4
body: <p>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 hard-coded array i was able to achieve filter, sort and pagination. But i am not able to pass a json data from service into the array.</p>
  
  <p>Any help would be appreciated.
  Thanks in advance..!!!</p>
  
  <p>Please find my code below.</p>
  
  <p><strong>test.json</strong></p>
  
  <pre><code>[{
   "FirstName": "Jill",
   "LastName": "Smith",
   "Score": "disqualified"
  }, {
   "FirstName": "Eve",
   "LastName": "Jackson",
   "Score": "94"
  }, {
   "FirstName": "John",
   "LastName": "Doe",
   "Score": "80"
  }, {
   "FirstName": "Adam",
   "LastName": "Johnson",
   "Score": "67"
  }]
  </code></pre>
  
  <p><strong>component.service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { HttpModule, Http, Response, Headers, RequestOptions } from 
  '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  import { User } from '../models/fleetData.model';
  
  @Injectable()
  export class FleetDataService {
   private serviceUrl = '../../assets/data/test.json';
    constructor(private http: HttpClient) { }
      getFleetData(): Observable&lt;User[]&gt; {
    return this.http.get&lt;User[]&gt;(this.serviceUrl);
   }
  
  }
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>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 {
    // dataSource = new UserDataSource(this.getFleetData);
    displayedColumns = ['First Name', 'Last Name', 'Score'];
    dataSource = new MatTableDataSource&lt;User&gt;(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"
     }]
     export class UserDataSource extends DataSource&lt;any&gt; {
      constructor(private getFleetData: FleetDataService) {
      super();
     }
      connect(): Observable&lt;User[]&gt; {
       return this.getFleetData.getFleetData();
     }
      disconnect() {}
    }
  </code></pre>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;h1&gt;Hi Dashboard&lt;/h1&gt;
  &lt;div class="example-header"&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput (keyup)="applyFilter($event.target.value)" 
      placeholder="Filter"&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  &lt;div class="example-container mat-elevation-z8"&gt;
    &lt;mat-table [dataSource]="dataSource" matSort&gt;
      &lt;!-- First Name Column --&gt;
    &lt;ng-container matColumnDef="First Name"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; First Name &lt;/mat-
        header-cell&gt;
      &lt;mat-cell *matCellDef="let user"&gt; {{user.FirstName}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
      &lt;!-- Last Name Column --&gt;
    &lt;ng-container matColumnDef="Last Name"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Last Name &lt;/mat-
        header-cell&gt;
      &lt;mat-cell *matCellDef="let user"&gt; {{user.LastName}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
     &lt;!-- Score Column --&gt;
    &lt;ng-container matColumnDef="Score"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Score &lt;/mat-header-
        cell&gt;
      &lt;mat-cell *matCellDef="let user"&gt; {{user.Score}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;
    &lt;/mat-row&gt;
  &lt;/mat-table&gt;
  
  &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>