infinite scroll not keeping previous data

Question

The issue I'm running into is when my scroll bar reaches near the bottom, it makes the call for the next 20 records in the result set, however, it replaces the previous 20 records with the new 20. Am I missing something with infinite scroll? Here is my logic:

// top-rated-movies.component.ts

// ... ... ...
import {TopRatedMoviesService} from '../../services/top-rated-movies.service';
//... ... ...

export class TopRatedMoviesComponent implements OnInit {
  topRatedMovies: Object;
  pageNum = 1;

  constructor(private _topMoviesService: TopRatedMoviesService) { }

  ngOnInit(): void {
    this._topMoviesService.getPopularMovies().subscribe(data => {
      this.topRatedMovies = data;
    });
  }

  onScrollDown() {
    this.pageNum++;
    this._topMoviesService.getPopularMovies(this.pageNum)
      .subscribe(data => this.topRatedMovies = data);
  }

}

why you reassigning the data?. instead you can push the new data to `this.topRatedMovies` — Sheik Althaf, Mar 29 '19 at 05:18
I don't have interface. it's only a property i've made @SheikAlthaf — idan, Mar 29 '19 at 05:21

score 1 · Answer 1 · edited Mar 29 '19 at 05:43

1

Make an array, push data which is coming from response on this array, assign that array to your view component hope its work.

edited Mar 29 '19 at 05:43

Vega

27,856
27
95
103

answered Mar 29 '19 at 05:37

Syed Kashif

420
6
13

score 0 · Answer 2 · answered Mar 29 '19 at 05:42

you can try like this

   // top-rated-movies.component.ts
   // ... ... ...
   import {TopRatedMoviesService} from '../../services/top-rated-movies.service';
  //... ... ...
  export class TopRatedMoviesComponent implements OnInit {
  topRatedMovies: any[] = [];
  pageNum = 1;
  constructor(private _topMoviesService: TopRatedMoviesService) { }

  ngOnInit(): void {
     this._topMoviesService.getPopularMovies().subscribe(data => {
     this.topRatedMovies = data;
  });
  }

  onScrollDown() {
   this.pageNum++;
   this._topMoviesService.getPopularMovies(this.pageNum)
    .subscribe(data => {
     this.topRatedMovies.push(data); // problem with you code is you are replace your old data with your new data so to solve this we create a array and push the data into that array so your old data remains the same  
     });
   }
  }

I hope it helps you out

Thanks for help. The problem is that data returns an Object. and that is why i cant define topRatedMovies as an array. — idan, Mar 29 '19 at 06:03
but you can push that object in to that array and create the array of object and iterate loop — Yash Rami, Mar 29 '19 at 06:25

infinite scroll not keeping previous data

2 Answers2