Angular Mattabledatasource, extracting data from node server-CodePudding

I am trying to build a table in angular and node application using MatTable DataSource. I have created a backend with an API call and a frontend with angular material. I am trying to get data from server and display it in a table. I have written the following code but it doesn't seem to work. Can someone help me?

TableService.ts

    import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {OrderDetail} from '../smartcard/table/table.component'
@Injectable({
  providedIn: 'root'
})

export class TableService {
  uri = "http://localhost:3000/users"
  constructor(protected http: HttpClient) { }

  getOrders() {
    return this.http.get<OrderDetail[]>(`{this.uri}`)
  }

}

Table.component.ts

import {Component, OnInit} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import { DataSource } from '@angular/cdk/table';
import {TableService} from '../../services/table.service';
import { filter } from 'rxjs';


export interface OrderDetail {

  position: number;
  modelname: string;
  status: string;
  trackinglink: string;
  id: string;

};




@Component({
  selector: 'app-table',
  styleUrls: ['./table.componenet.css'],
  templateUrl: 'table.component.html',
})


export class TableOrders {
  orders: OrderDetail[] = [];
  displayedColumns = ['position', 'orderid', 'status', 'trackinglink'];
  dataSource = new MatTableDataSource<OrderDetail>();

  constructor(private tableService: TableService) { }

  ngOnInit() {
    this.fetchOrders()
  }

  fetchOrders() {
    this.tableService
    .getOrders()
    .subscribe( data => {
      this.dataSource.data = data;
    });
  }


  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

}

Table.component.html

<mat-form-field appearance="standard" >

  <mat-label  >Filter by typing in a keyword:     </mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex.  SmartcardB" #input>
</mat-form-field>
<br>
<br>
<table mat-table [dataSource]="dataSource" >


  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let order"> {{order.position}} </td>
  </ng-container>


  <ng-container matColumnDef="modelname">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let order"> {{order.shipment_id}} </td>
  </ng-container>


  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> status</th>
    <td mat-cell *matCellDef="let order"> {{order.shipment_state_message}} </td>
  </ng-container>


  <ng-container matColumnDef="trackinglink">
    <th mat-header-cell *matHeaderCellDef> Tracking ID </th>
    <td mat-cell *matCellDef="let order"> <a href="order.tracking_link">{{order.tracking_number}}</a></td>
  </ng-container>

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

  <!-- Row shown when there is no matching data. -->
  <tr  *matNoDataRow>
    <td  colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>

Backend-api-call:

    app.get("/user", (req, res) => {
  console.log(req)
  orders(user_email,res)
})

Datafrom server:

{
        "position": 1,
        "shipment_id": 13,
        "shipment_state_message": Delivered
        "tracking_link": TrackingLink,
        "tracking_number": 98
    }

I am new to angular and using it to build a website for my team. Please help me out.

CodePudding user response：

Try this:

fetchOrders() {
    this.tableService
    .getOrders()
    .subscribe( data => {
      this.dataSource = new MatTableDataSource<OrderDetail>(data);
    });
 }

CodePudding user response：

Three things to correct in your code to guarante that it will work for you as expected:

1)
In service: TableService.ts

  getOrders() {
    return this.http.get<OrderDetail[]>(`{this.uri}`)
  }

${this.uri} not {this.uri}. You are missing the $ sign.

In component: Table.component.ts

 fetchOrders() {
    this.tableService
    .getOrders()
    .subscribe( (res) => {this.dataSource = new MatTableDataSource<OrderDetail>(res); });
  }

Your data type: Data-from-server:

Your response from your API endpoint should be an Array of Objects not an Object literal.