MatTableDataSource : cannot read property 'length' of undefined

Question

Im getting following error while using angular material data table. i am able to get the data from api but cannot render it in view.

Error:

error Image

TS:

      dataSource = new MatTableDataSource();  
      displayedColumns: string[] = ["Part#", "Description"];      
      getSearchResult() {
         let params = {
             ParentCategoryID: 0,
             CategoryID: 0,
             ManufacturerID: 0,  
       };
        this._httpService.getSearchResult(params).subscribe((resp: any) => {
        this.searchResult = resp;
        this.dataSource.data = this.searchResult;                 
       });
    }

View:

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> 
        <ng-container matColumnDef="Part#">
           <th mat-header-cell *matHeaderCellDef> Part# </th>
           <td mat-cell *matCellDef="let element "> {{element.PartCode}}            
          </td>
        </ng-container>

        <ng-container matColumnDef="Description">
          <th mat-header-cell *matHeaderCellDef> Description </th>
          <td mat-cell *matCellDef="let element "> 
              {{element.DiagramDescription}} </td>
         </ng-container>    

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

where you are accessing getSearchResult().? on constructor or on ngOnInit() — Aniket Avhad, Sep 25 '18 at 09:35
here is the stackblitz https://stackblitz.com/edit/angular-scbbxj?file=app/table-basic-example.ts try to comapre your code with this. — Aniket Avhad, Sep 25 '18 at 10:09

score 14 · Answer 1 · answered Jul 24 '19 at 18:31

14

Try putting dataSource = new MatTableDataSource(); inside the Constructor:

constructor() {
    dataSource = new MatTableDataSource();
}

answered Jul 24 '19 at 18:31

A-Sharabiani

17,750
17
113
128

Srinivasan N · Answer 2 · 2019-08-26T11:21:41.313

6

make initialisation inside constructor

this.dataSource.data = [];

OR

add the subscribe code inside constructor

constructor(private _httpService: imported service name) {this._httpService.getSearchResult(params).subscribe((resp: any) => {
    this.searchResult = resp;
    this.dataSource.data = this.searchResult;                 
   });}

edited Aug 26 '19 at 11:21

answered Aug 26 '19 at 11:13

Srinivasan N

733
8
9

score 2 · Answer 3 · edited Feb 08 '19 at 19:54

2

Please try this code:

this.dataSource= new MatTableDataSource(this.searchResult);

edited Feb 08 '19 at 19:54

dimwittedanimal

656
1
13
29

answered Sep 25 '18 at 09:53

Amol B Lande

242
1
2
13

by using the above the error is gone but the data is not rendered in view..Do i need to change anything in view as well ??? – Asridh Kumar Sep 25 '18 at 10:09
i got a property name wrong ..thats y its not rendered in view..its working fine now..but paginator is not working ?? any reason?? – Asridh Kumar Sep 25 '18 at 10:23
Yes. You need to declare @ViewChild(MatPaginator) paginator: MatPaginator; Then write this.dataSource.paginator = this.paginator; – Amol B Lande Sep 25 '18 at 11:02
Hi Asridh,If solution help you. Please like. – Amol B Lande Oct 01 '18 at 11:09

score 1 · Answer 4 · answered Mar 09 '22 at 09:46

1

Your dataSource is not initialized yet. When you initialized your dataSource, you can do something like this :

dataSource: MatTableDataSource = [];

OR

dataSource = new MatTableDataSource([]);

Regards,

answered Mar 09 '22 at 09:46

Yohann Daniel Carter

940
10
17

Simone Solfato · Answer 5 · 2019-02-27T19:40:43.943

The error occur because the table is not already initialized when you try to access to the data. Usually occurs also when you try to render the rows before the table is initialized. To solve it try to run

This should solve the problem:

TS:

dataSource = any[];  
displayedColumns: string[] = ["Part#", "Description"];      
getSearchResult() {
   let params = {
      ParentCategoryID: 0,
      CategoryID: 0,
      ManufacturerID: 0,  
   };
   this._httpService.getSearchResult(params).subscribe((resp: any) => {
      this.searchResult = resp;
      this.dataSource = this.searchResult;                 
   });
}

At least try to put the code after the view is initialized in ngAfterContentInit.

MatTableDataSource : cannot read property 'length' of undefined

5 Answers5

Linked