DEV Community

loading...
Cover image for Ionic getting Pokemon cards from an API

Ionic getting Pokemon cards from an API

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・3 min read

Like many apps, we want our app to pull data from a specific API.
In this case, it's a Pokemon TCG (Trading Card Game) API.

It's a good practice to create a service that will wrap the API, so we will be looking at that today.

The end result will be this list of Pokemon cards when we search for a specific Pokemon name.

Searching for Eevee in Ionic app

Note: Today's article covers a wrapped API, for your casual API's I refer you to my article on showing Ionic API Results.

Adding the API

The API comes as a typescript variant, so we don't need to wrap our calls in an HTTP wrapper.

We do have to add the package to our project.

npm install --save pokemon-tcg-sdk-typescript
Enter fullscreen mode Exit fullscreen mode

This will install the Pokemon TCG API.

Then we want to create our own service where we can implement all our logic for the API calls.

ng g service services/card
Enter fullscreen mode Exit fullscreen mode

That will generate a service inside the shared folder called card.service.ts.

Open up the card.service.ts file and start by importing the PokemonTCG API.

import { PokemonTCG } from 'pokemon-tcg-sdk-typescript'
Enter fullscreen mode Exit fullscreen mode

Now we want to build a function that can search the API for a specific card name.

searchCard(name:string) {
    let params:PokemonTCG.IQuery[] = [{name: 'name', value: name}];
    return PokemonTCG.Card.where(params);
}
Enter fullscreen mode Exit fullscreen mode

The API comes with something called an IQuery, which we can use to provide a specific search.
Then we call the Card API and pass our search query.

Using the API Service in a component

So far, we have the Card Service, but it won't do much if we don't have a component talking to it.

Let's modify the tab2.page component since we previously made sure that it was secured for logged in users.

Let's start by defining an empty array of cards.

cards: Card[];
Enter fullscreen mode Exit fullscreen mode

We load the Card type from the API as such:

import { Card } from 'pokemon-tcg-sdk-typescript/dist/sdk';
Enter fullscreen mode Exit fullscreen mode

Then we want to add our own wrapping service in the constructor.

constructor(private cardService: CardService) {}
Enter fullscreen mode Exit fullscreen mode

This will load the Card service we created. You do need to import it still.

import { CardService } from '../services/card.service';
Enter fullscreen mode Exit fullscreen mode

The last thing we need is a function that can search for a specific name of Pokemon.

searchCard(event) {
    this.cardService.searchCard(event.srcElement.value).then(cards => {
      this.cards = cards;
    })
}
Enter fullscreen mode Exit fullscreen mode

This function will receive an event, at which point it will call the cardService and invoke the searchCard method. It will return a list of cards and set the local reference to these cards as a callback.

Now let's look at how we can call this function from our HTML file.

<ion-searchbar (search)="searchCard($event)"></ion-searchbar>
Enter fullscreen mode Exit fullscreen mode

The ion-searchbar is a great way to accomplish this. I used the (search) callback since I didn't want to flood the API with a partial request.

This means the search event will only fire once we click search or enter, instead of doing it on every tick.

Now we need a grid to showcase all our cards.

<ion-grid>
    <ion-row>
      <ion-col size="4" *ngFor="let card of cards">
          <img [src]="card.imageUrl" [title]="card.name">
      </ion-col>
    </ion-row>
</ion-grid>  
Enter fullscreen mode Exit fullscreen mode

This will loop over our cards and add the image to our output.
It will make size four columns, which means 4/12, so basically 1/3 of the width.

And that's it if we now search for a Pokemon and click enter, we should see all the cards associated.

Charizard search in Ionic

You can find today's code on the following GitHub repo.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (0)

pic
Editor guide