Explore the titles provided by Wikipedia

Question

Explore the titles provided by Wikipedia

Hi there, I'm fairly new to Angular and trying to work with the Wikipedia API. However, I seem to be having trouble getting 4 titles from the API. Here's an example URL for one of the titles:

https://en.wikipedia.org/w/api.php?action=query&prop=pageprops&format=json&titles=Wilson_Lumpkin

Data Model

IwikiItem.ts:

export interface IWikiItem {
  batchcomplete?: string;
  query?: Query;
}

// Interfaces definition...

Component

// Component code snippet...

Service

// Service code snippet...

I'm encountering some errors while working on this. Could someone please help me out? The error messages can be found here: error msg and error.

json angular typescript

Answer 1

Answer №1

It appears that the Wikipedia APIs do not have support for CORS. In this case, you will need to make a jsonp request instead of a normal HTTP request.

To make a jsonp request, you must import the HttpClientJsonpModule module into your application. Once imported, you can proceed to make the request as shown 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);
 }

For a working sample, please visit this Link

Answer 2

It appears that the Wikipedia APIs do not have support for CORS. In this case, you will need to make a jsonp request instead of a normal HTTP request.

To make a jsonp request, you must import the HttpClientJsonpModule module into your application. Once imported, you can proceed to make the request as shown 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);
 }

For a working sample, please visit this Link

Explore the titles provided by Wikipedia

Data Model

Component

Service

Answer №1

Similar questions

Utilize Typescript Functions to Interact with GeoJSON Data in Palantir Foundry

How can you securely send your API key to an AngularJS service for authentication?

Discovering how to retrieve data from the payload() function when receiving information from Firestore using an Arduino

Tips for refreshing the apollo cache

What is the process for including authentication when posting parameters in an HTTP POST request with specific key-value pairs?

What are some ways I can enhance the typography within Material UI?

How to implement div scrolling on button click using Angular 4

The observer error silently assumes an undefined type

Trouble arises with connect-mongo, passport, and passport-local-mongoose as session fails to persist

Unable to retrieve observable modifications

Duplicating an Angular 2 reactive form without retaining the original reference

Stack the labels of separate datasets on top of each bar in a bar chart using Chartjs: How can this be achieved?

Purge the inversify-js container and fetch fresh service instances

Mastering the art of utilizing particles.js

Unable to serialize stream data in ASP .NET Core

I encountered an issue with the date input stating, "The parameters dictionary includes a missing value for 'Fromdate' parameter, which is of non-nullable type 'System.DateTime'."

What sort of data type does this belong to?

An exploration of effortlessly moving elements using webdriver.io - the power of

Ways to incorporate type into an object comprised of n element in Typescript

Switching between languages dynamically with Angular JS using $translateProvider and JSON files