Question 296160 in Html Question posted in
Some basic documentation can be found here.

Html – Angular Material table not showing data from API call

I am stuck trying to figure out why my mat-table is not showing my data…
I am using Angular 15 and angular material 15

Here is my HTML component code:

          <mat-divider></mat-divider>
          <table mat-table [dataSource]="terjatveTable" class="mat-elevation-z8">
            <!-- Name Column -->
            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef>Name</th>
              <td mat-cell *matCellDef="let element">{{ element.series.name }}</td>
            </ng-container>

            <!-- Series Column -->
            <ng-container matColumnDef="series">
              <th mat-header-cell *matHeaderCellDef>Value</th>
              <td mat-cell *matCellDef="let element">{{ element.series.value }}</td>
            </ng-container>

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

here is the componenent.ts file code:

 displayedColumnsTableOne: string[] = ['name', 'series'];
 terjatveTable: terjatveTableData[];

  getSingleCustomerTerjatveChartData() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.customerService.getSingleCustomerTerjatveChartData(id).subscribe(
      (data: any) => {
        if(data.error) {
          this.errorMessage = true;
        } else {
          this.terjatveTable = data;
        }
      },
      (error) => {
        console.log('Error', error);
        this.terjatveTable = null;
        this.errorMessage = error.error === 'No data';
      });
  }

and here is the example of data I get from api call:

[
    {
        "name": "51399",
        "series": [
            {
                "name": "0-30 dni",
                "value": 12026.899999999999636202119290828704833984375
            },
            {
                "name": "30-60 dni",
                "value": 1293.259999999999990905052982270717620849609375
            },
            {
                "name": "60-90 dni",
                "value": 0
            },
            {
                "name": "90-180 dni",
                "value": 629.98000000000001818989403545856475830078125
            },
            {
                "name": "180+ dni",
                "value": 129.729999999999989768184605054557323455810546875
            }
        ]
    }
]
Tags:

2

Answers


  1. 0

    You need to input an array to datasource to render. So please refer the below code.

    import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
  standalone: true,
  imports: [MatTableModule],
})
export class TableBasicExample {
  links: Array<string>;
  displayedColumnsTableOne: string[] = ['name', 'series'];
  terjatveTable: any[];

  ngOnInit() {
    const data = [
      {
        name: '51399',
        series: [
          {
            name: '0-30 dni',
            value: 12026.899999999999636202119290828704833984375,
          },
          {
            name: '30-60 dni',
            value: 1293.259999999999990905052982270717620849609375,
          },
          {
            name: '60-90 dni',
            value: 0,
          },
          {
            name: '90-180 dni',
            value: 629.98000000000001818989403545856475830078125,
          },
          {
            name: '180+ dni',
            value: 129.729999999999989768184605054557323455810546875,
          },
        ],
      },
    ];
    this.terjatveTable = data;
  }
}

    stackblitz

    Login or Signup to reply.
  2. 0

    You want to display the name and value from the series, but the series is an array and you can’t access the nested property in your current way.

    In case that there could be multiple elements in the root array, you should flatten the nested array in this form:

    [
    {
      name: '51399',
      series: {
        name: '0-30 dni',
        value: 12026.899999999999636202119290828704833984375,
      }
    },
    ...
]

    terjatveTable!: any[];

this.terjatveTable = data.reduce((acc: any[], cur: any) => {
    cur.series.forEach((x: any) => {
      acc.push({
        ...cur,
        series: x,
      });
    });

    return acc;
  }, [] as any[]);

    In my example, I use the any[] type instead of terjatveTableData[] as unsure your terjatveTableData structure.

    Demo @ StackBlitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search