Paginate API data in Ionic App

Ionic Framework Ionic Angular
1

I’m trying to paginate data from API, the API is not paginated cause I want to perform that only on the app. With the code below it doesn’t do any pagination but when all products are shown (30products) it does make a useless load. I can’t seem to fix it. Hope u guys can help me. Thanks in advance!

API request

//Get All the Products
app.get('/products', (_req, _res) => {
    mysqlConnection.query('SELECT * from Products', (err, rows, _fields) => {
        if (!err)
            _res.send(rows);
        else
            console.log(err);
    })
});

Service

getALLProduct(){
    return this.http.get("http://localhost:3000/products")
  }

I’m trying to paginate data from API, the API is not paginated cause I want to perform that only on the app. With the code below it doesn’t do any pagination but when all products are shown (30products) it does make a useless load. I can’t seem to fix it. Hope u guys can help me. Thanks in advance!

API request

//Get All the Products
app.get('/products', (_req, _res) => {
    mysqlConnection.query('SELECT * from Products', (err, rows, _fields) => {
        if (!err)
            _res.send(rows);
        else
            console.log(err);
    })
});

Service

getALLProduct(){
    return this.http.get("http://localhost:3000/products")
  }

Html

<ion-list>
      <ion-grid style="margin: 0%">
        <ion-row>
          <ion-col size="6" *ngFor="let item of posts" >
            <ion-card  >
              <div style="position: relative;">
                <ion-card-title >{{item.Name}} </ion-card-title>
              </div>
            </ion-card>
          </ion-col>
        </ion-row>

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

      </ion-grid>
    </ion-list>

Module .ts

posts: any[] =[];
  totalPosts = 0;
  limit = 10;
  loading: any;

@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  
  constructor(
    public api:ApiService,
    public loadingController: LoadingController,
    ) {}

  ngOnInit() {
    this.getData();
 }

  async getData() {
    this.loading = await this.loadingController.create({
      message: 'Please wait...',
      spinner: 'crescent',
      duration: 2000
    });

    await this.loading.present();
    this.api.getALLProduct().subscribe((res: any[]) => {
      this.totalPosts = res.length;
      this.module = res.length;
      for (let post of res) {
        this.posts.push(post);
      }
      this.hideLoading();
    });
  }

  private hideLoading() {
    this.loading.dismiss();
  }

  loadMorePosts(event) {
    setTimeout(() => {
      console.log('Begin async operation');
      this.limit = 10;
      event.target.complete();

      if (this.totalPosts < this.limit) {
        event.target.disabled = true;
      }
    }, 500);
  }
  //

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
2

Mmm, not really something specific to Ionic, but since it looks like you’re using Express, could out this pagination middleware