Infinite scrolling of data from the API

Ionic Framework
1

Data comes from API. Infinite scroll works but does not move to the next page. Page 1 repeats continuously. My codes are below. Can you help me?

tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      <ion-icon name="planet"></ion-icon>
      ***News
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="padding">

    <ion-card *ngFor="let article of data.docs" (click)="openUrl()">
      <ion-img [src] = "article.featured_image"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>{{article.news_site_long}}</ion-card-subtitle>
        <ion-card-title>{{article.title}}</ion-card-title>
      </ion-card-header>
    
      <ion-card-content>
        {{article.published_date}}
      </ion-card-content>
    </ion-card>

    <ion-infinite-scroll threshold="100px" (ionInfinite)="LoadMoreNews($event)">
        <ion-infinite-scroll-content
          loadingSpinner="crescent"
          loadingText="Loading More News">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
   
</ion-content>

tab1.page1.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { NewsService } from '../news.service';
import {Router} from '@angular/router';
import { BrowserTab } from '@ionic-native/browser-tab/ngx';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
  
  data: any = [];
  page = 1;

  constructor(private newsService: NewsService, private router: Router, private browserTab: BrowserTab, private http: HttpClient) {
    
  }


//Brawser Tab başlangıç
  openUrl(article: string){
    this.browserTab.isAvailable()
        .then((isAvailable: boolean) => {

        if(isAvailable) {

            this.browserTab.openUrl(article);

        } else {

            // if custom tabs are not available you may  use InAppBrowser

        }

        }); 
      }
//Browser Tab son

  ngOnInit() {
    this.newsService
    .getNews()
    .subscribe(data =>{
      console.log(data);
      this.data = data;
    });
  }

  //Infinity scroll start
  LoadMoreNews(event){
    this.page++;
    console.log(event);
    this.newsService
    .getNews()
    .subscribe(data =>{
      for(const article of data['docs']){
        this.data.docs.push(article);
      }
      event.target.complete();
      console.log(this.data);
    });
  }
  //Infinity scroll end
  
  
}

news.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class NewsService {
  public apiUrl: any = 'https://xxxapi.net/api/v1/';

  currentArticle: any;

  constructor(private http: HttpClient) { }

  getNews() {
    const url = this.apiUrl + 'articles?limit=10?page=${this.page}';
    return this.http.get(url);
  }

}
2

Is there anyone who can help me?

3

You need to pass this.page as parameter to getNews function.

news.service.ts

 getNews(page) {
    const url = this.apiUrl + 'articles?limit=10?page=${page}';
    return this.http.get(url);
  }

tab1.page1.ts

ngOnInit() {
    this.newsService
    .getNews(this.page)
    .subscribe(data =>{
      console.log(data);
      this.data = data;
    });
  }

  //Infinity scroll start
  LoadMoreNews(event){
    this.page++;
    console.log(event);
    this.newsService
    .getNews(this.page)
    .subscribe(data =>{
      for(const article of data['docs']){
        this.data.docs.push(article);
      }
      event.target.complete();
      console.log(this.data);
    });
  }
  //Infinity scroll end
4

Thank you but not work :frowning:

5

So you didn’t make as i say.
Add your app files and i fix it for you

6

I fixed it the way you wrote it. But not work.

Do you use Team Viewer?

7

yes
send details to avishaidev06@gmail.com

8

I sent login information.