{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material2/issues/7701","repository_url":"https://api.github.com/repos/angular/material2","labels_url":"https://api.github.com/repos/angular/material2/issues/7701/labels{/name}","comments_url":"https://api.github.com/repos/angular/material2/issues/7701/comments","events_url":"https://api.github.com/repos/angular/material2/issues/7701/events","html_url":"https://github.com/angular/material2/issues/7701","id":264451701,"number":7701,"title":"CDK data-table does not functioning with spring back-end data service","user":{"login":"sanka76811","id":13537724,"avatar_url":"https://avatars3.githubusercontent.com/u/13537724?v=4","gravatar_id":"","url":"https://api.github.com/users/sanka76811","html_url":"https://github.com/sanka76811","followers_url":"https://api.github.com/users/sanka76811/followers","following_url":"https://api.github.com/users/sanka76811/following{/other_user}","gists_url":"https://api.github.com/users/sanka76811/gists{/gist_id}","starred_url":"https://api.github.com/users/sanka76811/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sanka76811/subscriptions","organizations_url":"https://api.github.com/users/sanka76811/orgs","repos_url":"https://api.github.com/users/sanka76811/repos","events_url":"https://api.github.com/users/sanka76811/events{/privacy}","received_events_url":"https://api.github.com/users/sanka76811/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-10-11T04:10:48Z","updated_at":"2017-10-12T14:28:04Z","closed_at":"2017-10-11T05:42:47Z","author_association":"NONE","body":"\r\nI implemented md-table (CDK) in my project connecting mysql db through spring backend. Initially I intigrate md-table sample code (https://material.angular.io/components/table/examples) with its sample data. I worked fine. But when I connect my actual data comming through the spring service, data view in the table correctly and filter option not function. It gives script error as mentioned below. \r\n\r\n`ERROR TypeError: Cannot read property 'slice' of undefined\r\n    at MapSubscriber.project (client-list.component.ts:148)\r\n    at MapSubscriber._next (map.js:77)\r\n    at MapSubscriber.Subscriber.next (Subscriber.js:89)\r\n    at MergeAllSubscriber.OuterSubscriber.notifyNext (OuterSubscriber.js:19)\r\n    at InnerSubscriber._next (InnerSubscriber.js:23)\r\n    at InnerSubscriber.Subscriber.next (Subscriber.js:89)\r\n    at BehaviorSubject._subscribe (BehaviorSubject.js:28)\r\n    at BehaviorSubject.Observable._trySubscribe (Observable.js:171)\r\n    at BehaviorSubject.Subject._trySubscribe (Subject.js:97)\r\n    at BehaviorSubject.Observable.subscribe (Observable.js:159)`\r\n\r\nI publish my code here because it wont work in plunker without my spring data service.\r\n\r\nclilent-list-component.html\r\n------------------------------\r\n`\r\n<div class=\"example-container mat-elevation-z8\">\r\n  <div class=\"example-header\">\r\n    <md-form-field floatPlaceholder=\"never\">\r\n      <input mdInput #filter placeholder=\"Filter users\">\r\n    </md-form-field>\r\n  </div>\r\n  <cdk-table #table [dataSource]=\"dataSource\"  class=\"example-table\">\r\n\r\n    <!-- Position Column -->\r\n    <ng-container cdkColumnDef=\"id\">\r\n      <cdk-header-cell *cdkHeaderCellDef  class=\"example-header-cell\"> No. </cdk-header-cell>\r\n      <cdk-cell *cdkCellDef=\"let element\" class=\"example-cell\"> {{element.id}} </cdk-cell>\r\n    </ng-container>\r\n\r\n    <!-- Name Column -->\r\n    <ng-container cdkColumnDef=\"fname\">\r\n      <cdk-header-cell *cdkHeaderCellDef class=\"example-header-cell\"> Name </cdk-header-cell>\r\n      <cdk-cell *cdkCellDef=\"let element\" class=\"example-cell\"> {{element.fname}} </cdk-cell>\r\n    </ng-container>\r\n\r\n    <!-- Weight Column -->\r\n    <ng-container cdkColumnDef=\"lname\">\r\n      <cdk-header-cell *cdkHeaderCellDef class=\"example-header-cell\"> Last name </cdk-header-cell>\r\n      <cdk-cell *cdkCellDef=\"let element\" class=\"example-cell\"> {{element.lname}} </cdk-cell>\r\n    </ng-container>\r\n\r\n    <!-- Color Column -->\r\n    <ng-container cdkColumnDef=\"email\">\r\n      <cdk-header-cell *cdkHeaderCellDef class=\"example-header-cell\"> email </cdk-header-cell>\r\n      <cdk-cell *cdkCellDef=\"let element\" class=\"example-cell\"> {{element.email}} </cdk-cell>\r\n    </ng-container>\r\n\r\n    <cdk-header-row *cdkHeaderRowDef=\"displayedColumns\" class=\"example-header-row\"></cdk-header-row>\r\n    <cdk-row *cdkRowDef=\"let row; columns: displayedColumns;\" class=\"example-row\"></cdk-row>\r\n  </cdk-table>\r\n</div>\r\n\r\n`\r\n\r\n\r\nclient-list-component.ts\r\n----------------------------\r\n`import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';\r\nimport {ActivatedRoute, Router} from \"@angular/router\";\r\nimport {ClientService} from \"../../services/client.service\";\r\nimport {Client} from \"../../data/client\";\r\nimport {DataSource} from \"@angular/cdk/collections\";\r\nimport {Observable} from \"rxjs/Observable\";\r\n//import {MdTableModule} from '@angular/material';\r\nimport 'rxjs/add/observable/of';\r\nimport {BehaviorSubject} from \"rxjs/BehaviorSubject\";\r\n\r\n\r\n@Component({\r\n  selector: 'app-client-list',\r\n  templateUrl: './client-list.component.html',\r\n  styleUrls: ['./client-list.component.css']\r\n})\r\n\r\nexport class ClientListComponent implements OnInit {\r\n\r\n  sampleData : Client [] = [{ id:13,\r\n                              fname:'carkade',\r\n                              lname:'wijesinghe',\r\n                              email:'carkade@gmail.com',\r\n                              title:'2',\r\n                              dob:'2017-08-28',\r\n                              gender:'1',\r\n                              mobile:'0714809448',\r\n                              countryCode:'LK',\r\n                              createdDate:'1504593982000',\r\n                              status:0}];\r\n  displayedColumns = ['id', 'fname', 'lname', 'email'];\r\n\r\n  dataSource: ExampleDataSource | null;\r\n\r\n  constructor(private route: ActivatedRoute,\r\n              private router: Router,\r\n              private clientService: ClientService) { }\r\n\r\n  @ViewChild('filter') filter: ElementRef;\r\n\r\n  ngOnInit() {\r\n\r\n    this.dataSource = new ExampleDataSource(this.route, this.clientService);\r\n\r\n    Observable.fromEvent(this.filter.nativeElement, 'keyup')\r\n      .debounceTime(150)\r\n      .distinctUntilChanged()\r\n      .subscribe(() => {\r\n        console.log(\"-event start : \"+this.filter.nativeElement.value)\r\n        if (!this.dataSource) {\r\n          console.log(\"dataSource null\");\r\n          return;\r\n        }\r\n        this.dataSource.filter = this.filter.nativeElement.value;\r\n      });\r\n  }\r\n\r\n}\r\n\r\n/** An database that the data source uses to retrieve data for the table. */\r\nexport class ClientDatabase {\r\n  dataChange: BehaviorSubject<Client[]> = new BehaviorSubject<Client[]>([]);\r\n  get data(): Client[] { return this.dataChange.value; }\r\n\r\n  constructor(clientDataBase: Client[]) {\r\n    this.dataChange.next(clientDataBase);\r\n  }\r\n}\r\n\r\n\r\nexport class ExampleDataSource extends DataSource<any> {\r\n  /** Connect function called by the table to retrieve one stream containing the data to render. */\r\n\r\n  clients: Client[];\r\n  clientDatabase: ClientDatabase;\r\n\r\n  _filterChange = new BehaviorSubject('');\r\n  get filter(): string { return this._filterChange.value; }\r\n  set filter(filter: string) { console.log(\"filter 2 : \"+filter); this._filterChange.next(filter); }\r\n\r\n  constructor(private route: ActivatedRoute, private clientService: ClientService) {\r\n    super();\r\n  }\r\n\r\n  connect(): Observable<Client[]> {\r\n    console.log(\"------------ ExampleDataSource connect --------------\");\r\n\r\n    this.route\r\n      .params\r\n      .map(params => params['status'] || '-1')\r\n      .subscribe(status => {\r\n        console.log(\"ExampleDataSource connect 1\");\r\n        if (!this.clientService.clients) {\r\n          this.getClients(status);\r\n        } else {\r\n          this.clients = this.clientService.clients;\r\n        }\r\n        console.log(\"ExampleDataSource connect 2\");\r\n        this.clientDatabase = new ClientDatabase(this.clients);\r\n      });\r\n\r\n    const displayDataChanges = [\r\n      this.clientDatabase.dataChange,\r\n      this._filterChange,\r\n    ];\r\n    console.log(\"data from backend > : \"+JSON.stringify(this.clientDatabase));\r\n\r\n      return Observable.merge(...displayDataChanges).map(() => {\r\n        return this.clientDatabase.data.slice().filter((item: Client) => {\r\n          let searchStr = (item.fname + item.lname).toLowerCase();\r\n          return searchStr.indexOf(this.filter.toLowerCase()) != -1;\r\n        });\r\n      });\r\n  }\r\n\r\n  disconnect() {}\r\n\r\n  getClients(status: number) {\r\n    if (true)\r\n      this.clientService.getClients(status).then(\r\n        res => {\r\n          this.clients = res;\r\n        });\r\n    return this.clients;\r\n  }\r\n}\r\n`\r\nconsole log for \"data from backend\" prints:\r\n \r\n`connect this.clientDatabase : {\"dataChange\":{\"_isScalar\":false,\"observers\":[],\"closed\":false,\"isStopped\":false,\"hasError\":false,\"thrownError\":null,\"_value\":[{\"id\":13,\"fname\":\"carkade\",\"mname\":null,\"lname\":\"wijesinghe\",\"title\":\"2\",\"email\":\"carkade@gmail.com\",\"emailNew\":null,\"dob\":\"2017-08-28\",\"gender\":\"1\",\"mobile\":\"0714809448\",\"country\":{\"code\":\"LK\",\"name\":\"Sri Lanka\"},\"token\":\"ca5a33d2-fe73-41a8-aeab-368ce9e7ecfc\",\"createdDate\":1504593982000,\"status\":0,\"password\":\"b83027a303a5f7dc20fb1a2d6ad2e046\",\"salt\":\"iqTdlhHC+1j6/akmbVzOeg==\"},{\"id\":19,\"fname\":\"Sanka\",\"mname\":null,\"lname\":\"wijesinghe\",\"title\":\"4\",\"email\":\"sanka@gmil.com\",\"emailNew\":null,\"dob\":\"2014-12-29\",\"gender\":\"1\",\"mobile\":\"0714809448\",\"country\":{\"code\":\"LK\",\"name\":\"Sri Lanka\"},\"token\":\"f5a57f2e-e4fa-4286-ac0f-3c99d2233894\",\"createdDate\":1505802532000,\"status\":0,\"password\":\"7f67762dc47ea8caa9db115bc84ad7de\",\"salt\":\"9MBDaNArbBKDOEvv8lsXgg==\"},{\"id\":20,\"fname\":\"Sanka\",\"mname\":null,\"lname\":\"wijesinghe\",\"title\":\"4\",\"email\":\"sanka.w@gmail.com\",\"emailNew\":null,\"dob\":\"2010-12-27\",\"gender\":\"1\",\"mobile\":\"0714809448\",\"country\":{\"code\":\"LK\",\"name\":\"Sri Lanka\"},\"token\":\"2060e276-c64b-422e-9183-620042288e7c\",\"createdDate\":1505802706000,\"status\":0,\"password\":\"915e307a8cf467767d6adbc60d868df7\",\"salt\":\"puOmRu0RtGuiSGkfoS7F3g==\"},{\"id\":22,\"fname\":\"Sanka\",\"mname\":null,\"lname\":\"wijesinghe\",\"title\":\"2\",\"email\":\"info@carkade.com\",\"emailNew\":null,\"dob\":\"2017-09-06\",\"gender\":\"1\",\"mobile\":\"0714809448\",\"country\":{\"code\":\"LK\",\"name\":\"Sri Lanka\"},\"token\":\"788ea560-7e8d-43bd-86fc-5e8d55842c2c\",\"createdDate\":1506444003000,\"status\":0,\"password\":\"0b08fd68bcf839fc3564a025e1f97c20\",\"salt\":\"CrReLqA8VQvyTwxtcAWZRA==\"},{\"id\":23,\"fname\":\"Sanka\",\"mname\":null,\"lname\":\"wijesinghe\",\"title\":\"2\",\"email\":\"sdasdasd@ddd.com\",\"emailNew\":null,\"dob\":\"2017-09-13\",\"gender\":\"1\",\"mobile\":\"+94-1111111111\",\"country\":{\"code\":\"LK\",\"name\":\"Sri Lanka\"},\"token\":\"33af7107-dfe3-48cd-9c60-063480870889\",\"createdDate\":1506588235000,\"status\":0,\"password\":\"9376bcf20a1b5ff1d7f6887944997b80\",\"salt\":\"nBj6VsCmIlj5NJYRZUksBA==\"}]}}`\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular/material2/issues/comments/336154417","html_url":"https://github.com/angular/material2/issues/7701#issuecomment-336154417","issue_url":"https://api.github.com/repos/angular/material2/issues/7701","id":336154417,"user":{"login":"willshowell","id":6475576,"avatar_url":"https://avatars0.githubusercontent.com/u/6475576?v=4","gravatar_id":"","url":"https://api.github.com/users/willshowell","html_url":"https://github.com/willshowell","followers_url":"https://api.github.com/users/willshowell/followers","following_url":"https://api.github.com/users/willshowell/following{/other_user}","gists_url":"https://api.github.com/users/willshowell/gists{/gist_id}","starred_url":"https://api.github.com/users/willshowell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/willshowell/subscriptions","organizations_url":"https://api.github.com/users/willshowell/orgs","repos_url":"https://api.github.com/users/willshowell/repos","events_url":"https://api.github.com/users/willshowell/events{/privacy}","received_events_url":"https://api.github.com/users/willshowell/received_events","type":"User","site_admin":false},"created_at":"2017-10-12T14:28:04Z","updated_at":"2017-10-12T14:28:04Z","author_association":"CONTRIBUTOR","body":"@sanka76811 some things that may help you,\r\n\r\n1. Try keeping the observable chain alive instead of transforming it into a promise. Since the data table uses observables to connect your data to the table, I personally find it easiest to exclusively use observable streams\r\n2. Take a look at the example [here](https://github.com/angular/material2/tree/master/src/material-examples/table-http). It demonstrates using Github's api to retrieve repo issues and populate the table\r\n\r\n@andrewseguin any reason that example hasn't made it on the docs site yet?"}}
{"actor":{"display_login":"willshowell"}}