Apply infinite scroll to JSON array in ionic-3 app

Question

How can I implement infinite scroll to my JSON array? I want to display only 5 items initially.

data:[
0: Object { id: 123, title: "New family member Khjkjh has joined mymily", mm_family_id: 122, … }
1: Object { id: 124, title: "New family member Hey Dau has joined mymily", mm_family_id: 122, … }
2: Object { id: 125, title: "New family member Hey Dau has joined mymily", mm_family_id: 122, … }
3: Object { id: 126, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
4: Object { id: 127, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
5: Object { id: 128, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
6: Object { id: 129, title: "New family member New Dau has joined mymily", mm_family_id: 122, … }
7: Object { id: 130, title: "Abhishek Pandey has commented on post", mm_family_id: 122, … }
8: Object { id: 131, title: "Abhishek Pandey has commented on post", mm_family_id: 122, … }
]

Ionic info

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : not installed

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.7.0
npm  : 5.6.0
OS   : Windows 10

Mati Cassanelli · Accepted Answer · 2019-06-17 18:26:53Z

3

You can use the slice pipe with your ngFor. (Credits to https://forum.ionicframework.com/t/how-to-implement-ionic-infinite-scroll-to-show-my-array-data/96860/5)

<ion-list>
  <ion-item *ngFor="let i of items  | slice:0:slice">
    your code here
  </ion-item>
</ion-list>

<ion-infinite-scroll threshold="100px" (ionInfinite)="doInfinite($event)">
  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

in your .ts file:

slice: number = 5;
doInfinite(infiniteScroll) {
 setTimeout(() => {
  this.slice += 5;
  infiniteScroll.complete();
 }, 300);
}

In the first iteration, you will show the first 5 items (slice = 5). When doInfinite is called, your slice increases its value in 5, so you will show 10 items.

Hope it helps you!

answered Jun 17, 2019 at 18:26

Mati Cassanelli

7436 silver badges11 bronze badges

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

1 Comment

Jackson Harry Over a year ago

infiniteScroll.target.complete(); this is how you need to call in ionic v4 and v5

Mahesh Jadhav · Accepted Answer · 2018-02-09 12:58:12Z

1

You can implement infinite scroll feature of ionic and can initialize your items array inside constructor with the number of items you want to display at first in your case 5 items at start so you can do this:

your html:

<ion-content>
 <ion-list>
   <ion-item *ngFor="let i of items">{{i}}</ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>
</ion-content>

in your ts:

items = [];
count: number = 0;

constructor() {
  for (let i = 0; i < 5; i++) {  // here you can limit the items according to your needs.
    this.items.push(data[this.count]);   // your JSON data which you want to display
    this.count++ //i am using a count variable to keep track of inserted records to avoid inserting duplicate records on infinite scroll
  }
}

doInfinite(infiniteScroll) {
  setTimeout(() => {
    for (let i = 0; i < 5; i++) {   
      this.items.push(data[this.count]); // this will start pushing next 5 items
      this.count++
    }

    infiniteScroll.complete();
  }, 500);
}

edited Feb 9, 2018 at 12:58

answered Feb 9, 2018 at 11:12

Mahesh Jadhav

1,0891 gold badge8 silver badges13 bronze badges

3 Comments

Abhin Pai Over a year ago

Thanks for the solution. but there is some issue while loading more data same data will push into the array when JSON data reach the end.

Stephan Strate Over a year ago

In the for loop of doInfinite there, he forgot to increase the this.count variable. If you add this, it should work.

Mahesh Jadhav Over a year ago

oops sorry just went unnoticed thanks @StephanStrate..wait will update the answer

Collectives™ on Stack Overflow

Apply infinite scroll to JSON array in ionic-3 app

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related