Array of objects as dataSource for Material Angular table

Question

My user data looks like this which is causing issues...

[{"firstName":"Pinkie","lastName":"Connelly","username":"Darlene.Marvin","email":"[email protected]"},{"firstName":"Easter","lastName":"Ruecker","username":"Giovani.Collier59","email":"[email protected]"},{"firstName":"Harmon","lastName":"Luettgen","username":"Rosanna51","email":"[email protected]"},{"firstName":"Angeline","lastName":"Kunze","username":"Gabriel_Braun69","email":"[email protected]"},{"firstName":"Gayle","lastName":"Bahringer","username":"Dorcas_Roob55","email":"[email protected]"},{"firstName":"Adriana","lastName":"Renner","username":"Serenity.Armstrong42","email":"[email protected]"},{"firstName":"Arvid","lastName":"Kiehn","username":"Estrella87","email":"[email protected]"},{"firstName":"Kristofer","lastName":"Nader","username":"Terence.Walker7","email":"[email protected]"},{"firstName":"Rosa","lastName":"Lebsack","username":"Freida_Hegmann46","email":"[email protected]"},{"firstName":"Rogers","lastName":"Thiel","username":"Mike_Braun","email":"[email protected]"}]

I am using Angular and imported Material Angular. The first problem I had was using *NgFor with this data structure, but since Angular V6 you can now use a keyValue pipe which is really cool! so that problem solved.

I then wanted to *NgFor into a table so each person would populate a row. You dont use NgFor for a table, instead it uses dataSource -

<table mat-table #table [dataSource]="user">
  <!-- table rows -->
</table>

But again... Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError

This is how I am getting user -

export class AppComponent {
  error: any;
  title = 'toms-app';
  user: User;

constructor(private apiServicefile: ApiServicefile) { }


ngOnInit(): void {
  this.apiServicefile.getUser()
    .subscribe(
      (data: User) => this.user = { ...data }, // success path
      error => this.error = error // error path
    );
}
}

New to typeScript and how to go about getting my desired result. please help?

Replace this.user = { ...data } by this.users = data. You get an array from the server, and you need this array for your datasource. Why transform it to an object? Rename user to users, since it's an array of users and not a single User. And thus change its type to Array<User>. — JB Nizet

srjkaa srjkaa · Accepted Answer · 2019-06-29T20:34:04

this.user is not an Array after:

{ ...data };

Just do it like this:

this.user = data;

Or by the way you can improve it a bit like this, html:

<table mat-table #table [dataSource]="user | async">
  <!-- table rows -->
</table>

In TS file you user is:

Array<User>

, not an User, but as we write in html user with 'async' pipe you can define it like:

Observable<Array<User>> or Observable<User[]>

and assign this.apiServicefile.getUser() to this field.

export class AppComponent {
  error: any;
  title = 'toms-app';
  user: Observable<Array<User>>;

  constructor(private apiServicefile: ApiServicefile) { }


  ngOnInit(): void {
    this.user = this.apiServicefile.getUser();
  }
}

Array of objects as dataSource for Material Angular table

1 Answers