CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
Abhin Pai
Abhin Pai

Reputation: 492

Apply infinite scroll to JSON array in ionic-3 app

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

Upvotes: 0

Views: 2199

Answers (2)

Mati Cassanelli
Mati Cassanelli

Reputation: 743

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!

Upvotes: 3

Mahesh Jadhav
Mahesh Jadhav

Reputation: 1089

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

Upvotes: 1

Related Questions