How can I Implement infinite scroll with observable provider


#1

Hello, Im new to ionic. How can I implement ionic infinite scroll using this method of get data from the wordpress api?

This is my posts.ts

export class PostsPage {

  posts: Observable<Array<Post>>;

  items:any
 

  constructor(public navCtrl: NavController, public navParams: NavParams, private data: DataProvider
   ) {
    this.getPosts();
  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad PostsPage');
  }

  getPosts() {
      this.posts = this.data.getPosts();
    }

    

    doRefresh(refresher){
      this.posts.subscribe(data=>{
        this.items = data;
        refresher.complete();
      });
    }  
    

  navigateToDetail(postId: number) {
    this.navCtrl.push( 'PostDetailPage', { postId: postId } );
  }

this is my provider data.ts

  private rootUrl: string = 'https://jsonplaceholder.typicode.com';
  private posts: string = 'posts';
 

  constructor(public http: Http) {
    
  }

  getPosts() {
    return this.http.get(`${this.rootUrl}/${this.posts}`).map( res => res.json()).take(1);
  }

  getPostById(id: number) {
    return this.http.get(`${this.rootUrl}/${this.posts}/${id}`).map( res => res.json() ).take(1);
  }

}

Any help will be appreciated.


#2

By following the tutorial ? :slight_smile:


#4

I would like a little more help. like I said I am new at this. How do I use the function with my current code?


#5

Can someone help me with this please?


#6

I wasn’t able to get the infinite scroll to work. Can anyone help?


#7

This solution worked for me. I adjusted the code to fit mine. Hope it helps others in the future
https://forum.ionicframework.com/t/infinitescroll-ionic-2-just-take-the-same-data-solved/68951