how to get data from nested json in angular material tables ? - ANGULAR

Question

im trying to get data from localhost, but when it comes on diffrent structure i can't understand how to get those datas on data user. any helps ?

and this is how im trying to approach but failed and get ERROR Error: Could not find column with id "_id".

Json File

{
  "message": "Handling GET requests to User",
  "dataUser": [
    {
      "CountLike": 15,
      "CountShare": 26,
      "id": "5edb6d50d77987442cf1d7ed",
      "Name": "Andy",
      "Point": 40
    }
  ]
}

and this is my servise.ts files

getUsers() {
    return this.http.get('http://localhost:3000/surveys');
}

this is my html files

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

  <!-- Name Column -->
  <ng-container matColumnDef="dataUser CountLike">
    <th mat-header-cell *matHeaderCellDef>Like</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser.CountLike }}
    </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="dataSurvey CountShare">
    <th mat-header-cell *matHeaderCellDef>Share</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser.CountShare }}
    </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="dataUser Point">
    <th mat-header-cell *matHeaderCellDef>Point</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser.Point }}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: displayedColumns"
    (click)="selection.toggle(row)"
  ></tr>
</mat-table>

this is my component.ts files ignore how im put name on the interface xD

export interface Userstructure {
  _id: string;
  CountLike: string;
  CountShare: string;
  Point: string;
}
export interface UserMain {
  message: string;
  dataUser: Userstructure[];
}

@component
displayedColumns: string[] = [
    '_id',
    'CountLike',
    'CountShare',
    'Point',
  ];
users: Userstructure[];
dataSource;
user;
selection = new SelectionModel<Userstructure>(true, []);
ngOnInit(): void {
console.log(this.users);//this return 'undefined' on console.
this.surveyService.getUsers().subscribe((users: Userstructure[]) => {
      this.users = users;
      this.dataSource = new MatTableDataSource(users);
    });
  }

TotallyNewb · Accepted Answer · 2020-06-15 07:17:53Z

1

First of all, DataSource expects an array of objects, and you are providing it with an object (based on the example Json you provided). So, you want to use only the dataUser part of the response.

this.surveyService.getUsers().subscribe((users: Userstructure[]) => {
  this.users = users.dataUser;
  this.dataSource = new MatTableDataSource(users.dataUser);
});

}

Second thing - the displayedColumns names have to match the names of the columns in the matColumnDef. Also, you don't want to add any spaces into the column names - those are translated into ids, and css classes as well, so you probably want to keep them short and simple. Just remove the dataUser part from the column names (note - also remove the space). This should fix your initial problem - haven't checked the rest of the code, but this should get you on track.

answered Jun 15, 2020 at 7:17

TotallyNewb

4,8801 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user0404 Over a year ago

I tried similar approach but it keep giving me error "Property dataUser does not exist on type Userstructure[]". To fix this I have to update code as

this.surveyService.getUsers().subscribe((users) => {   this.users = users.dataUser;   this.dataSource = new MatTableDataSource(users.dataUser); });

Collectives™ on Stack Overflow

how to get data from nested json in angular material tables ? - ANGULAR

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related