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, and specific 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 just focus on showing the list for now.

The end 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 in. Open up and insert the following HTML.

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

<ion-content [fullscreen]="true">

If we render this it will look like this:

Ionic basic list

Now we will make this dynamic by doing a 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

Now if we have the let's make a loadData function.

loadData(event = null) {
	.get<{ data: any[] }>(``)
	.subscribe((resp: { data: any }) => { =;

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

The rest of the component will look like this.

data: any[] = [];

constructor(private http: HttpClient) {}

ionViewWillEnter() { = [];

Now let's modify the actual

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

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 1509 devs and subscribe to my newsletter