Guide to adding the current date into a URL with Angular

I'm a little confused at the moment and could use some guidance. My goal is to dynamically insert the current date into an API URL using Angular. Here is the progress I have made so far:

Below is my Typescript code:

import { HttpClient} from '@angular/common/http';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-matches',
  templateUrl: './matches.component.html',
  styleUrls: ['./matches.component.css']
})
export class MatchesComponent implements OnInit {
public myMatches: any = []
myDate = new Date();
  constructor( private http: HttpClient , public datePipe: DatePipe) { 
    let myDates = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');
  }
getMyMatches(){
  const url = "https://app.sportdataapi.com/api/v1/soccer/matches?apikey=myKey&season_id=1980&date_from=+myDates"
  return this.http.get(url).subscribe((res)=>{
    this.myMatches =res
    console.log(res);
    
  })
}
  ngOnInit(): void {
    this.getMyMatches()
  }
}
In my web browser's console, I am receiving a 500 response status error. The DatePipe has been included in the app module's providers.

Answer №1

The issue is not related to the DatePipe.

@Component({
  selector: 'app-matches',
  templateUrl: './matches.component.html',
  styleUrls: ['./matches.component.css']
})
export class MatchesComponent implements OnInit {
public myMatchesData: any = []
myDatesData: any;

  constructor( private httpService: HttpClient , public dateTransformer: DatePipe) { 
    this.myDatesData = this.dateTransformer.transform(new Date(), 'yyyy-MM-dd');
  }
getMyMatchResults(){
  const apiEndpoint = "https://app.sportdataapi.com/api/v1/soccer/matches?apikey=myKey&season_id=1980&date_from=" + this.myDatesData;
  return this.httpService.get(apiEndpoint).subscribe((response)=>{
    this.myMatchesData = response
    console.log(response);
    
  })
}
  ngOnInit(): void {
    this.getMyMatchResults()
  }
}

Answer №2

String interpolation is necessary in this case. Give the following code a try:

 const link = `https://app.sportdataapi.com/api/v1/soccer/matches?apikey=myKey&season_id=1980&date_from=${+myDates}`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to importing a JavaScript module as any type without using a declaration file (d.ts)

Looking to bring a js module into my ts app. Is there a way to achieve this without creating a d.ts file? If not, how can it be declared as any in the d.ts file? Currently using //@ts-ignore to ignore the error. Appreciate any help! ...

Utilizing regular expressions to search through a .md file in JavaScript/TS and returning null

I am currently using fs in JavaScript to read through a changelog.MD file. Here is the code snippet: const readFile = async (fileName: string) => { return promisify(fs.readFile)(filePath, 'utf8'); } Now I am reading my .md file with this fu ...

Can you explain the purpose of FunctionConstructor in typeScript?

As I delved into the Typescript Ecmascript source code, I stumbled upon this intriguing snippet: interface FunctionConstructor { /** * Creates a new function. * @param args A list of arguments the function accepts. */ new(...args: st ...

What is the best way to relocate the styles folder to the src folder while using nextjs, typescript, and tailwind

I am currently working with Next.js using TypeScript and Tailwind CSS. My goal is to relocate the styles folder into the src folder. I have already updated the baseUrl in my tsconfig.json file to point to the src directory, but I encountered the following ...

The issue I'm facing with the change handler for the semantic-ui-react checkbox in a React+Typescript project

Hey there! I'm currently facing an issue with two semantic-ui-react checkboxes. Whenever I try to attach change handlers to them, I end up getting a value of 'undefined' when I console log it. My goal is to retrieve the values of both check ...

The variable remains unchanged after the API call, despite using useState

Despite my efforts to find a solution, I still find myself puzzled by this question that has seemingly been answered before. The issue lies in the synchronization of my code when making a request to the what3words API. The data retrieved is assigned to a ...

The cucumber_report.json file will not update to reflect the most recent test steps

I have encountered an issue with the cucumber_reporter.json file not overwriting under the reports/html folder in my framework. To address this, I made changes to the cucumberOpts option within my config.ts file. By modifying the format setting to "json:./ ...

Looking for a Python library that supports proxy for Twitter Streaming API?

Anyone know of a Python library for the Twitter Streaming API that supports proxies? I like tweepy, but haven't found a way to use an HTTP proxy. Any suggestions? ...

What steps should I take to resolve the issue of my endpoint failing to accept POST requests?

I am in the process of developing a customized API, with an endpoint that is specified as shown below: https://i.stack.imgur.com/sZTI8.png To handle the functionality for this endpoint, I have set up a Profiling Controller. Inside my controller directory ...

The ngIf statement in the template isn't functioning properly after a refresh; instead, it is causing a redirection to the homepage

I've been developing with Angular 7, trying to display a <div> ... </div> based on multiple values that I declared as : Boolean = false; in the .ts file. These values are updated in ngOnInit, but for some reason, the page keeps redirecting ...

Transitioning an NX environment to integrate ESM

My NX-based monorepo is quite extensive, consisting of half a dozen apps, frontend, backend, and dozens of libs. Currently, everything is set up to use commonjs module types, as that's what the NX generators have always produced. However, many librar ...

Utilizing an external HTTP API on an HTTPS Django and Angular server hosted on AWS

Can this be achieved? I am in the process of creating an ecommerce platform that necessitates interacting with an external API service built on HTTP. My website is hosted on AWS EBS, utilizing django for the backend and angular2 for the frontend. Whenever ...

Filtering an RXJS BehaviorSubject: A step-by-step guide

Looking to apply filtering on data using a BehaviorSubject but encountering some issues: public accounts: BehaviorSubject<any> = new BehaviorSubject(this.list); this.accounts.pipe(filter((poiData: any) => { console.log(poiData) } ...

Angular 2: A guide to connecting Input with model property using getter and setter functions

I'm currently developing an Angular 2 web application. The model I have created consists of a few primary properties, along with other properties that are calculated based on those primary values. For each property in my model, I have implemented get ...

What is the best way to retrieve the dataset object from a chart object using chart.js in typescript?

Currently, I am facing a challenge in creating a new custom plugin for chart.js. Specifically, I am encountering a type error while attempting to retrieve the dataset option from the chart object. Below is the code snippet of the plugin: const gaugeNeedle ...

The comparison between importing TypeScript and ES2015 modules

I am currently facing an issue with TypeScript not recognizing the "default export" of react. Previously, in my JavaScript files, I used: import React from 'react'; import ReactDOM from 'react-dom'; However, in TypeScript, I found tha ...

Guide to accessing the content of pure ES6 modules directly in the Chrome console without the need for Webpack

Situation: When using tsc to compile code for es6, the scripts function properly once they are served from a server. However, I am unsure of how to access variables within modules through the console. The file names do not seem to be available as objects ...

Tips for changing a function signature from an external TypeScript library

Is it possible to replace the function signature of an external package with custom types? Imagine using an external package called translationpackage and wanting to utilize its translate function. The original function signature from the package is: // ...

What is the process for transitioning global reusable types to package types within turborepo?

When creating an app within the apps folder, a global.d.ts file is required with specific types defined like this: interface Window{ analytics: any; } This file should be designed to be reusable and placed in the packages/types directory for easy acce ...

What causes a folder to disappear after rerunning in nest.js?

When working on my project using nest.js in MacOS Sonoma, I encountered a problem where the image folder src/products/images gets deleted after every project rerun (npm start). The images are saved like this: for (const image of images) { const fileName ...