Handling Object with a key of unknown number

Question

I am using Wikipedia's api and the response looks like this:

{
 'query': {
          'pages': {
                    212187: {
                             'extract': value;
                            }
                   }
          }
}

I am trying to get the extract value. However, when I cannot get past the 212187 because it is a number that will change with each call I make. This is not allowing me to accurately model out the response object. The current model I have is undefined at the 212187 level and blocking me from getting to extract.

How can I accomplish this? Any help/suggestions/tips would be appreciated.

UPDATE I have an interface that matches the response structure exactly except the 212187 I have as number (assumed that would be wrong). My Request looks like:

  fetchDescriptionWiki(qSearch: string) {
    const params: URLSearchParams = new URLSearchParams();
      params.set('origin', '*');
      params.set('format', 'json');
      params.set('action', 'query');
      params.set('prop', 'extracts');
      params.set('exintro', '');
      params.set('explaintext', '');
      params.set('indexpageids', '');
      params.set('titles', qSearch);
    const options = new RequestOptions({
      search: params
    });
    return this.http.get(this.pendingCardsDescriptionWikiUrl, options)
      .map(this.extractApiData);
  }

extractApiData:

  private extractApiData(res: Response) {
    const body = res.json();
    return body || [];
  }

My component.ts function looks like:

getDescription() {
  this.pendingCardService.fetchDescriptionWiki('SomeStringValue')
    .subscribe(data => {
      this.wikiResult = data;
    });
}

This is where I got stuck with being able to dig into the response and get the value of extract.

You mean in terms of the types? You need something like { [key: number]: Extract }. — jonrsharpe
– jonrsharpe, Commented Aug 16, 2017 at 21:22
Could you add some of the code you are currently using to work with this data structure? — DeborahK
– DeborahK, Commented Aug 16, 2017 at 21:22
Do you mind expanding your explanation @jonrsharpe? Do you mean in the interface? — Brian Stanley
– Brian Stanley, Commented Aug 17, 2017 at 1:41

Alexander Staroselsky · Accepted Answer · 2017-08-17 05:42:49Z

3

I've used something along the following to retrieve the data from a Wikipedia API Extract Query using Angular HttpClient (Angular 4+). It utilizes Object.keys() then targeting the desired page via array index (index 0 in this case) so you wouldn't need to know the page id.

I've updated the answer to use the class and method names from your example. I'd recommend to upgrade to HttpClient, but you'd be able to achieve the same result with Angular 2's Http.

@Injectable()
export class PendingCardService {

    private: string wikipediaUrl =
        'https://en.wikipedia.org/w/api.php?action=query' +
        '&format=json&prop=extracts&exintro=1&explaintext=1' +
        '&origin=*&titles=Some_title';

    fetchDescriptionWiki(): Observable<any> {
        // this can use URLSearchParams as you did
        return this.http.get(this.wikipediaUrl).map(this.extractApiData);
    }

    private extractApiData(res: Response): Foobar {
       // json() is unnecessary in Angular 4+ as json() is automatically called
       const body = res.json();

       const pages = body.query.pages;
       const pageKeys = Object.keys(pages);

       // Retrieve the first page (index 0)
       const page = pages[pageKeys[0]];

       // ES6 object destructuring to get extract value
       const { extract } = page;

       // creating some object from retrieved value
       const foobar: Foobar = { extract };

       return foobar;
    }
}

Component:

getDescription() {
  this.pendingCardService.fetchDescriptionWiki()
    .subscribe((foobar: Foobar) => {
      this.wikiResult = foobar;
    });
}

Hopefully that helps!

edited Aug 17, 2017 at 5:42

answered Aug 16, 2017 at 21:24

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

3 Comments

Alexander Staroselsky Over a year ago

I didn't realize your were looking for the model definition rather than the process to extract the data, hopefully it still helps in some way. Thanks!

Brian Stanley Over a year ago

Honestly I am looking for both. Just trying to get to the extract value. I haven't updated to 4.3.4 yet so I haven't spent time with HttpClient. I will look into it. Thanks!

Alexander Staroselsky Over a year ago

Updated the answer to use the class/method names you provided. After calling json(), you should be able to access the extract property via Object.keys(). I'm using this approach (Angular 4+) to specifically get at the extract property when targeting a single/specific page title. You'd ideally access the values in the extractApiData() executed from map().

gilamran · Accepted Answer · 2017-08-16 21:27:58Z

0

Like this:

interface IWikipediaData {
    query: {
        pages: {
            [key: number]: {
                extract: string
            }
        }
    }
}

let example: IWikipediaData = {
    query: {
        pages: {
            212187: {
                extract: 'value'
            }
        }
    }
}

answered Aug 16, 2017 at 21:27

gilamran

7,3144 gold badges34 silver badges54 bronze badges

1 Comment

Leonardo Neninger Over a year ago

I think that DeborahK will need to know the page number to get the extract value. Would help to implement setter custom implementation an re-format the response in order to get a more dev firendly object.

Collectives™ on Stack Overflow

Handling Object with a key of unknown number

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related