0

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

meir1meir
  • 3
  • 2

1 Answers1

0

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

Vimal Patel
  • 2,785
  • 2
  • 24
  • 38
  • Great! thanks. can you please write error handle best practice for that function? – meir1meir Jan 30 '21 at 17:22
  • you can refer this document for the same [Link](https://angular.io/guide/http#making-a-jsonp-request) Please accept the answer if this solve your problem. – Vimal Patel Jan 30 '21 at 17:41
  • i am getting an error, `this.handleError` - Argument of type '(error: HttpErrorResponse) => void' is not assignable to parameter of type '(err: any, caught: Observable) => ObservableInput'. Type 'void' is not assignable to type 'ObservableInput' – meir1meir Jan 30 '21 at 21:55
  • Check this [Link](https://codesandbox.io/s/headless-rgb-4tciu?file=/src/app/data.service.ts) No able to reproduce, Can you share your source code? – Vimal Patel Jan 31 '21 at 11:44