Subscribe

Ionic showing API results in a list view

✍️

Showing API results in a cool list view in Ionic

31 Oct, 2020 · 3 min read

Today I wanted to check in on Ionic again, explicitly making an API call and showcasing the results in a list.

This is a very common use case in Ionic. You want to call an API endpoint and get a list of results back.

The user can often click these items and see the detail page. In our instance, we will focus on showing the list for now.

The result will look like this:

Ionic list

Ionic starting point

A while ago, we created a basic Ionic app, which we will use as our template to work from.

If you’re interested in getting started with Ionic, follow this article.

You can download the starting template from GitHub.

Creating our list component

We will be using the default tabs to create our list. Open up tab1.page.html and insert the following HTML.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Tab 1 </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>
        <h2>cerulean</h2>
        <h3>#98B2D1</h3>
        <p>2000</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

If we render this, it will look like this:

Ionic basic list

Now we will make this dynamic by doing an API call!

Adding an API call

Now let’s add an API so we can fetch some data to fill his list.

First, let’s enable the HttpClientModule in the app.module.ts.

imports: [
    // Other imports
    HttpClientModule,
],

Now, if we have the tab1.page.ts, let’s make a loadData function.

loadData(event = null) {
    this.http
    .get<{ data: any[] }>(`https://reqres.in/api/unknown`)
    .subscribe((resp: { data: any }) => {
      this.data = resp.data;
    });
}

This will call our API and set the data of this component to be the response.data object.

The rest of the components will look like this.

data: any[] = [];

constructor(private http: HttpClient) {}

ionViewWillEnter() {
    this.data = [];
    this.loadData();
}

Now let’s modify the actual tab1.page.html.

<ion-list>
  <ion-item *ngFor="let item of data">
    <ion-label>
      <h2>{{ item.name }}</h2>
      <h3>{{ item.color }}</h3>
      <p>{{ item.year }}</p>
    </ion-label>
  </ion-item>
</ion-list>

When we run this, it will look like this.

Ionic list

There we go. How cool, right?

You can find this project on GitHub.

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

How to solve App Tracking Transparency app store rejection in Ionic

4 Aug, 2021 · 4 min read

How to solve App Tracking Transparency app store rejection in Ionic

Ionic tab bar circle middle button

19 May, 2021 · 2 min read

Ionic tab bar circle middle button

Join 2099 devs and subscribe to my newsletter