Get titles from Wikipedia - json

Question

I am kinda new to Angular.
I am trying to get 4 titles from Wikipedia API, but i can't figure up what's wrong in my code
this is the eample URL for 1 title
example URL = https://en.wikipedia.org/w/api.php?action=query&prop=pageprops&format=json&titles=Wilson_Lumpkin
model
IwikiItem.ts:
export interface IWikiItem {
batchcomplete?: string;
query?: Query;
}
export interface Query {
normalized?: Normalized[];
pages?: Pages;
}
export interface Normalized {
from?: string;
to?: string;
}
export interface Pages {
id?: The4101295;
}
export interface The4101295 {
pageid?: number;
ns?: number;
title?: string;
pageprops?: Pageprops;
}
export interface Pageprops {
defaultsort?: string;
page_image_free?: string;
wikibase_item?: string;
}
Component
private titles = [
'Wilson_Lumpkin',
'Robert Toombs',
'Saxby Chambliss',
'Wyche Fowler',
];
export class HomeComponent implements OnInit {
dataSource: MatTableDataSource<IWikiItem>;
constructor(private srv: SrvService) {
this.titles.forEach((name) => {
this.srv
.getWiki('action=query&prop=pageprops&format=json&titles=' + name)
.subscribe((data) => {
console.log(data.query),
(this.dataSource: new MatTableDataSource<IWikiItem[data]>);
(err) => {
console.log(err);
};
});
});
}
}
service
export class SrvService {
readonly base_url = 'https://en.wikipedia.org/w/api.php?';
getWiki(title: string) {
return this.http.get<IWikiItem>(this.base_url + title);
}
constructor(private http: HttpClient) {}
}
What's wrong here? i am, getting this error in console:
error msg
Edit 1
I am getting an error this.handle eror.
error

Answer 1

I guess Wikipedia APis does not support CORS. So instead of normal http request, you need t make a jsonp request.
For jsonp request you need to import module HttpClientJsonpModule in your application.
After that you can make the request like below.
Reference Link
getWiki(title: string) {
const url = this.base_url + title;
return this.http.jsonp(url, 'callback').pipe(
catchError(this.handleError) // then handle the error
);
}
callback(response) {
console.log("response", response);
}
handleError(error){
console.log(error);
}
Working sample Link