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

Answer 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);
}

Answer 2

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!