Displaying table from json response not working

[frigid hedge]

JSON payload is coming back with the right data but I can't seem to display the right data to my table, The data is not showing in angular material component. I want to be able to table down the data I have in json response.

I am using Angular Material for the components of my application

code:

 <mat-form-field appearance="outline">
        <mat-label>Month</mat-label>
        <input matInput [(ngModel)]="month">
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Year</mat-label>
        <input matInput [(ngModel)]="year">
      </mat-form-field>
          <button (click)="getDepreciationList()" mat-raised-button color="primary">Load Property</button>


<!--Table-->

<table mat-table [dataSource]="propertySched" *ngIf='showTable' class="table-bg" mat-table>

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

  <ng-container matColumnDef="itemDescription">
    <th mat-header-cell *matHeaderCellDef>Item Description</th>
    <td mat-cell *matCellDef="let element"> {{element.itemDescription}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>

tsfile code:

 year : any = new Date().getFullYear();
  month : any = new Date().getMonth() + 2;
 depreciationListObj :Array<Object>;
  displayedColumns = ['id']
  showTable: boolean = false;
  constructor(private depreciationsrv: DepreciationService) {}
  ngOnInit(): void {
  }
  getDepreciationList() {
 this.depreciationsrv.getForDepreciationList(this.year, this.month).subscribe((depreciationListObj:DepreciationDTO) => {
    console.log(depreciationListObj);  
    this.showTable = !this.showTable;

[uncut edge]

g!codeblock @frigid hedge

[delicate lance]

@frigid hedge, you can use the following snippet to have your code formatted and colored by Discord. Replace ts with the language you need (i.e. html, js, css, etc)
```ts
// your code goes here
```

[uncut edge]

and add more code samples: your snippet is missing the top part of your table and there is nothing about data initialization.

Explain what 'not working' means too.

[frigid hedge]

Don't worry about the array object on depreciationListObj :Array<Object>; i changed it

[uncut edge]

are you still grabbing stuff? your datasource is propertySched but it's nowhere in your snippets

[frigid hedge]

naw i removed it already

i only use the depreciation bit

ill remove it

[uncut edge]

How do you expect your table to be filled in? you need a datasource

[frigid hedge]

wth

what should i use? this? depreciationListObj

[uncut edge]

I don't know as you didn't explain what you expect to be rendered.

[frigid hedge]

i expect to render the data inside the json payload above

these ones to be precise

[uncut edge]

then yes, but mind you need to understand your data format before assigning it to your table. You don't want count to be included.

[frigid hedge]

what count?

really sorry new to angular

[uncut edge]

That's not about Angular here but about JSON, count is on the first line of your response.

[frigid hedge]

so i need to like have a selector of somesort?

[uncut edge]

The response doesn't match the format a table expects: it must be a list of items. You need to remap your response before assigning it to the datasource.

[frigid hedge]

what if i wanted to display everything on it not a specific one?

how do i do that?

[uncut edge]

it's not about specific or everything, it's about the format being wrong here.
Your response is not an array

The table needs to iterate over a list to display each item but your list is not only nested but the properties too (in details).

[frigid hedge]

can you please tell me these things in a beginner way, New to angular and js/ts

[uncut edge]

Firstly create an interface matching the type of data you want for your table.
It'll help you to understand what you need versus what you get
Then use .map(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) on the response from your service to map your response to the expected format.

Learning to use map is a really precious skill. It might take some time but you'll use it on a daily basis.

[frigid hedge]

will check on this later

thank you