API Service not fetching/returning any data

home.component.ts:

import { AfterViewInit, Component, ViewChild, OnInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { JonasUtilApiService } from '../service/jonas-util-api.service';
import { Spending } from './home.interface';

/**
* @title Data table with sorting, pagination, and filtering.
*/

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

export class HomeComponent implements OnInit, AfterViewInit {
displayedColumns: string[] = [
...
];
dataSource: MatTableDataSource<Spending>;

spendings: Spending[] = [];
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;

constructor(private jonasUtilApi: JonasUtilApiService) {
this.dataSource = new MatTableDataSource(this.spendings);
}

ngOnInit() {
this.jonasUtilApi.getSpendings(100).subscribe((res) => {
this.spendings = res;
});
}

ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}

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

if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}


service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Spending } from '../home/home.interface';

const API_URL = 'https://apiaddressgooglecloud.a.run.app/';

@Injectable({
providedIn: 'root',
})
export class JonasUtilApiService {
constructor(private httpClient: HttpClient) {}

getSpendings(limit: number = 50) {
console.log('call', limit, `${API_URL}spendings`);
return this.httpClient.get<Spending[]>(`${API_URL}spendings`, {
params: { limit: limit },
});
}

storeDataFromList(body: any) {
return this.httpClient.post(`${API_URL}callback/monthlyHours`, body);
}
}


The URL is certainly working if I click on it, data is returned in browser. I am not sure what I am doing wrong here. I haven't coded in Angular in quite a bit of time, so a bit rusty, but double checked online and it seems to be the correct way.

Continue reading...