I am currently working on creating a simple web news reader that relies heavily on the Google News API (). I have set up all the necessary services, models, etc. However, I am having difficulty mapping the data onto specific interfaces. The Google API returns data in the following format from one of its endpoints ('top-headlines'):
{
"status": "ok",
"totalResults": 38,
"articles": [
{
"source": {
"id": "the-new-york-times",
"name": "The New York Times"
},
"author": null,
"title": "Hong Kong Protesters Clash with Police Amid Fears of Mob
Violence - The New York Times",
"description": "some description",
"url": "https://www.nytimes.com/2019/08/11/world/asia/hong-kong-
protest.html",
"urlToImage":
"https://static01.nyt.com/images/2019/08/11/world/11hongkong15/
11hongkong15-facebookJumbo.jpg",
"publishedAt": "2019-08-11T11:19:03Z",
"content": "some content… [+751 chars]"
},
(...and many more articles)
]
}
My goal is to extract only the articles. While I know that I can access the articles by calling myvariablename.articles if I retrieve the data from the API like that, it doesn't seem right to me.
Initially, I tried mapping it using the rxjs map method. However, I encountered an error in the console stating that there was no property 'articles' in the Articles model. So, I created a response model and nested the articles as a property inside the response model (interface). Despite this, I faced the same error. Subsequently, I suspected that the issue might lie in the Observable method's definition, so I switched to Response but to no avail. Currently, I am encountering an error in my component where I am subscribing and utilizing the service method, which states: "Type Response[] is not assignable to type Article[]"
top-news.service.ts
(...import statements)
export class TopNewsService {
(...variable definitions such as URL omitted.)
public getAll(): Observable<Response[]> {
return this.httpClient
.get<Response[]>(`${this.url}/${this.endpoint}?country=us&apiKey=${this.token}`)
.pipe(
map(response => response.articles),
catchError(this.handleError)
);
}
(...error handling)
}
article.ts
export interface Article {
source: {
id: string;
name: string;
};
author: string;
title: string;
description: string;
url: string;
urlToImage: string;
publishedAt: string;
content: string;
}
response.ts
import { Article } from './article';
export interface Response {
status: string;
totalResults: number;
articles: Article;
}
top-news-component.ts
(...import statements)
export class TopNewsComponent implements OnInit {
articles: Article[];
constructor(private http: HttpClient, private topNewsService: TopNewsService) { }
ngOnInit() {
this.getAllProjects();
}
getAllProjects() {
this.topNewsService.getAll().subscribe(data => {
this.articles = data;
console.log(this.articles)
},
(err: string) => {
alert(err);
});
}
}
I am seeking a solution to efficiently map the data within the service, retrieval of only articles, and then assigning this data to a designated variable in the component with the specified type of Article[].