Angular creating service with get request using HttpClient, question with types of get request

Question

I was trying to practice on Angular, I am having trouble with get requests types Angular Stackblitz

import { HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, map, Observable, throwError } from 'rxjs';



@Injectable({
  providedIn:'root'
})
export class PostsService {

  constructor(private http:HttpClient) { }
  getPosts():Observable<Post[]>{
    return this.http.get<any>('https://dummyjson.com/posts').pipe(
    map(res=> res.posts),
      catchError(err=>{
        console.log(err)
        return throwError(()=>err)
      })
    )
  }
}
interface PostResponse{
  limit: number
  posts: string[]
  skip: number
  total: number
}
interface Post {
  body: string
id: number
reactions: number
tags: string[]
title: string
userId: number
}

Generally I bypass this with any type instead of PostResponse or Post[] but I think it is not the best practice, map operator makes things more complicated I suppose. So what should get requests type be in this kind of situation?

I'm confused, why aren't you using the data structures defined above? — ela16
– ela16, Commented Dec 28, 2022 at 19:55
When I used them, they gave me type error, I tried both, API response return an object but I need just ' posts' , check Stackblitz, you can see errors — Latecoder
– Latecoder, Commented Dec 28, 2022 at 20:05

BizzyBob · Accepted Answer · 2022-12-28 20:28:04Z

2

Your problem is that you are declaring the posts property of the PostResponse as type string[], but it should be type Post[]:

interface PostResponse {
  limit : number;
  skip  : number;
  total : number;
  posts : Post[];
}

answered Dec 28, 2022 at 20:28

BizzyBob

14.9k4 gold badges32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular creating service with get request using HttpClient, question with types of get request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related