How to implement ionic infinite scroll to show my array data

Ionic Framework ionic-v3
1

This is my Array data which is contains almost 100+ data

 Items = [
     title: "lorem ", 
        description: "lorem to an array?
How to implement infinite scrolling in table data? [closed]" },
title: "lorem ", 
        description: "lorem to an array?
How to implement infinite scrolling in table data? [closed]" },
title: "lorem ", 
        description: "lorem to an array?
How to implement infinite scrolling in table data? [closed]" },
title: "lorem ", 
        description: "lorem to an array?
How to implement infinite scrolling in table data? [closed]" },
title: "lorem ", 
        description: "lorem to an array?
How to implement infinite scrolling in table data? [closed]" },
    ]

I need to show 1st 5 of the data when user scroll it will show next 5 from this items data I am allready tried to follow the ionic documentation instruction where the code

in home.html is

<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let d of items; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">
      <h3>
        {{d.title}}
        <ion-icon color="success" item-right [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
      </h3>
      <div *ngIf="isGroupShown(i)" [innerHTML]="d.description"></div>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      distance="1%"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

and in home.ts

  constructor(public navCtrl: NavController,public dataService: DataProvider ) {

    this.items = dataService.items;

    for (var i = 0; i < 5; i++) {
      this.items.push( this.items.length );
    }

  }

doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 5; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

where i put my array data in data.ts and call and import import { DataProvider } from '../../providers/data/data';

its work but its load all data and infinite scroll is working at the last when i scroll all of the data and make an list.

this not what i want.

1 Like
2

This makes no sense. Why do you want to push the length of this.items onto the array? You want to push the item you are just iterating over.

You don’t need that, this is just to make the function slower.[quote=“sagar290, post:1, topic:96860”]
for (let i = 0; i < 5; i++) {
[/quote]

Here in doInfinite you will need to use some indicator how far you already are and not start from the beginning again.

1 Like
3

Thanks, now I understand how infinity scroll work, I was actually trying to make some kinds of pagination but use documentation code without understanding :sweat: but now I figure out the solution. :slight_smile:

1 Like
4

can you give example your code? i’ve been stuck for weeks :frowning:

5

If you want to use infinite scroll , means show all the array data an start from beginning again ? then you need to use
this.items.concat( dataService.Items ); and dont need to use any loop. but if you want to pagination like me, like show 1st 5 data when user scroll down it will show next 5 data. then use slice pipe in your *ngFor
my code

 <ion-card id="list" *ngFor="let d of items | slice:0:slice; let i=index"  text-wrap>
      <ion-card-header>
        {{d.title}}
      </ion-card-header>
      <ion-card-content  [innerHTML]="d.description"></ion-card-content>
    </ion-card>

look the *ngFor="let d of items | slice:0:slice; where i can use *ngFor="let d of items | slice:0:5; like that.
so i just store the 5 inside slice variable and i am increasing the value of this variable by triggering doInfinity() function, like

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

dont know what is the standard way to solve this. but its work. :stuck_out_tongue:
sorry for my bad English.

4 Likes
6

works like a charm. thanks

8

It worked for me! Thanks. I had hours investigating this heheehe.

9

PAGINATION IN IONIC 3

All News HTML PART

<ion-content >
      <ion-card *ngFor="let all of allNewsVar">
      <ion-list>
         <ion-item >{{all}}</ion-item>
      </ion-list>
      </ion-card>

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

All News TS FILE PART

export class AllNewsPage {

  allNewsVar = [];
  pageno:any;

constructor( public searchService:SearchListService){
this.allNews();
this.pageno = 1;
}

allNews() {
    return this.searchService.getAllNews(this.pageno).subscribe(
        (res) => {
          let posts = res.data;
          for (let post of posts) {
            console.log(post);
            this.allNewsVar.push(post);
          }
        },
        (err) => {
          console.log(err);
        },
        () => console.log('done!')
    );
  }


doInfinite(infiniteScroll) {
    console.log('done!');
    let nextPageUrl = this.pageno++;
    console.log("next page:"+nextPageUrl);
    this.searchService.getAllNews(nextPageUrl).subscribe(
            data => {
          let posts=data.data;
          for(let post of posts){
             console.log(post);
            this.allNewsVar.push(post);
          }
        },
            err => {
          console.log(err);
        },
        () => console.log('Next Page Loading completed')
    );
    infiniteScroll.complete();
  }

AllNews Services TS File Part

getAllNews(nextPageUrl){
  this.allNewsResponse = this.http.get(this.allNewsUrl+'?page='+nextPageUrl);
        return this.allNewsResponse;
    }

HOPE THIS HELPS ANY ONE.

1 Like
10

Thank you bro… it is code working my project :slight_smile:

11

This is better solution for me. Thanks