Question 117690 in Mongodb Question posted in
The official documentation can be found here.

Mongodb – Angular Mattabledatasource, extracting data from node server

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" class="filter-form">

  <mat-label class="Filter" >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" class="mat-elevation-z8">


  <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 class="mat-row" *matNoDataRow>
    <td class="mat-cell" 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.

Tags:

2

Answers


  1. 0

    Try this:

    fetchOrders() {
    this.tableService
    .getOrders()
    .subscribe( data => {
      this.dataSource = new MatTableDataSource<OrderDetail>(data);
    });
 }
    Login or Signup to reply.
  2. 0

    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.

    2)

    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.

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

Back To Top
Search