#I need help with this error

16 messages · Page 1 of 1 (latest)

nimble veldt
#

Hi! I tried to make this data API request but I still get this error (pic). I tried to google the solution but I'm beginner and my knowledge about Angular isn't helpful. Can Somebody please help and explain how to fix this? ```ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class DataService {
getSummaryData: any;

constructor(private http: HttpClient) {
this.getSummaryData(){
return this.http.post(https://api.covid19api.com/summary);
}
}

}

image.png
teal pivot
#

g!badeyes @nimble veldt I cannot easily copy and paste text from a picture

mild gobletBOT
#

@nimble veldt Please do not post pictures of code (especially photos of a physical screen) as they are difficult to read and difficult to correct (as you cannot copy code from a screenshot to modify it).

teal pivot
#

g!codeblock @nimble veldt if you copy and paste your code into a code block as shown 👇 then I will be able to show you. But your code isn't really valid syntax/design

mild gobletBOT
#

@nimble veldt, you can use the following snippet to have your code formatted and colored by Discord. Replace ts with the language you need (i.e. html, js, css, etc)
```ts
// your code goes here
```

nimble veldt
teal pivot
#

First, don't use any this is TypeScript, so use Types. Else you are just coding JavaScript (ew)

#

Second, this:

  constructor(private http: HttpClient) {
    this.getSummaryData(){
      return this.http.post(`https://api.covid19api.com/summary`);
    }
   }

Is not valid code... I can guess what you meant maybe

# 
@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private readonly http: HttpClient) {}

  public getSummaryData(): Observable<Summary> {
    return this.http.post<Summary>('https://api.covid19api.com/summary');
  }
}

I think this is what you meant to do

#

But I suggest that you do this instead:

@Injectable({ providedIn: 'root' })
export class DataService {
  public readonly summary$: Observable<Summary>;

  constructor(private readonly http: HttpClient) {
    this.summary$ = this.http.post<Summary>('https://api.covid19api.com/summary');
  }
}

A method without any parameters that returns an Observable is better written as a public member property instead.

#

The first step in TypeScript is to define your Types. So you need to figure out what the response from https://api.covid19api.com/summary looks like and then make an interface for it:

export interface Summary {
  // Put the fields here
}
#

g!toh @nimble veldt And then you build the Tour of Heroes apps from the tutorials in the Angular Guide. They give you a nice overview of some of what Angular can do and how it does it.

mild gobletBOT
#

@nimble veldt The place we recommend starting your Angular journey is with the Tour of Heroes tutorial, located here https://angular.io/tutorial.

nimble veldt
teal pivot