# Ionic getting Pokemon cards from an API
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.
> Note: Today's article covers a wrapped API, for your casual API's I refer you to my article on [showing Ionic API Results](https://daily-dev-tips.com/posts/ionic-showing-api-results-in-a-list-view/).
## 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.
```bash
npm install --save pokemon-tcg-sdk-typescript
```
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.
```bash
ng g service services/card
```
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.
```js
import { PokemonTCG } from 'pokemon-tcg-sdk-typescript'
```
Now we want to build a function that can search the API for a specific card name.
```js
searchCard(name:string) {
let params:PokemonTCG.IQuery[] = [{name: 'name', value: name}];
return PokemonTCG.Card.where(params);
}
```
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](https://daily-dev-tips.com/posts/firebase-authenticated-user-routes-in-ionic/
).
Let's start by defining an empty array of cards.
```js
cards: Card[];
```
We load the `Card` type from the API as such:
```js
import { Card } from 'pokemon-tcg-sdk-typescript/dist/sdk';
```
Then we want to add our own wrapping service in the constructor.
```js
constructor(private cardService: CardService) {}
```
This will load the Card service we created. You do need to import it still.
```js
import { CardService } from '../services/card.service';
```
The last thing we need is a function that can search for a specific name of Pokemon.
```js
searchCard(event) {
this.cardService.searchCard(event.srcElement.value).then(cards => {
this.cards = cards;
})
}
```
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.
```html
```
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.
```html
![]()
```
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.
You can find today's code on the following [GitHub repo](https://github.com/rebelchris/ionic-firebase-login/tree/feature/api).
### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)