Angular Material Table not displaying data from API service - angular-material

Question

I've checked the other questions on this topic here but none seemed to solve my problem. I'm pulling a list of noticeboard notices from an API as an observable and trying to display them in a table. The table headers render but no rows. I can get the data to render if I use Pre tags and the variable but assigning it to dataSource isn't working - and no errors.
Service snippet
getObjectWithParams(object: any, params: any): Observable<any> {
this.ResourcePath = object;
const NewQueryOptions = this.QueryOptions + params;
return this.http.get(`${this.ServiceRoot}${this.ResourcePath}${NewQueryOptions}`, { 'headers': this.headers });
}
notices.component.ts
export class NoticesComponent implements OnInit {
public notices!: INotice[];
displayedColumns: string[] = ['ReleaseDate', 'ReleaseTag','Status', 'Title']
dataSource!: MatTableDataSource<INotice>;
pageSize = 10;
pageIndex = 0;
pageLength = 0;
private _top: number | undefined;
private _skip: number | undefined;
constructor( private OData: ODataService, private _location: Location) {}
ngOnInit(): void {
this.getNotices('/notices', '$count=true&$top=10');
}
public getNotices(table: string, params: string) {
this.OData.getObjectWithParams(table, params)
.subscribe( data => {
this.notices = data,
this.dataSource = new MatTableDataSource<INotice>(this.notices);
});
}
}
notices.component.html
<Div *ngIf="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
<ng-container matColumnDef="ReleaseDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Release Date </th>
<td mat-cell *matCellDef="let notice"> {{notice.ReleaseDate}} </td>
</ng-container>
<ng-container matColumnDef="ReleaseTag">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Release Tag </th>
<td mat-cell *matCellDef="let notice"> {{notice.ReleaseTag}} </td>
</ng-container>
<ng-container matColumnDef="Status">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
<td mat-cell *matCellDef="let notice"> {{notice.Status}} </td>
</ng-container>
<ng-container matColumnDef="Title">
<th mat-header-cell *matHeaderCellDef> Title </th>
<td mat-cell *matCellDef="let notice"> {{ notice.Title}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!--<pre> {{ notices | json }}</pre> -->
</Div>
I'm hoping another set of eyes may spot the issue easily so appreciate any insights in what I'm doing wrong.
Thanks.

Answer 1

It seems there is a problem with response parsing.
public getNotices(table: string, params: string) {
this.OData.getObjectWithParams(table, params)
.subscribe( response => {
this.notices = response.data, //this is actual response object
this.dataSource = new MatTableDataSource<INotice>(this.notices);
});
}
}

Answer 2

Thanks To #Rushit and #Kiran for the input. It was enough to make me dig deeper in the code and I found the issue.
I hadn't realised that the OData service wasn't removing some OData decorators on the return data which was messing up further manipulation.
As an FYI to anyone else this was how I solved it:
Corrected the OData Service to remove metadata using a QueryOptions variable
public QueryOptions = '?$format=application/json;odata.metadata=none'
...
getObjectWithParams(object: any, params: any): Observable<any> {
this.ResourcePath = object;
const NewQueryOptions = this.QueryOptions + params;
return this.http.get(`${this.ServiceRoot}${this.ResourcePath}${this.QueryOptions}`, { 'headers': this.headers });
}
And then as Rushit pointed out the input needed adjusting from response to response.value:
public getNotices(table: string, params: string) {
this.OData.getObjectWithParams(table, params)
.subscribe( response => {
this.notices = response.value,
this.dataSource = new MatTableDataSource<INotice>(this.notices);
});
}
}