How to solve duplicate data in ion-infinite-scroll

Ionic Framework
1

I am using ionic 4 and I am doing pagination using ion-infinite-scroll. My problem is I always get the duplicate page problem. Can I know how to solve this duplicate problem? Here is my code in home.page.ts :

doInfinite(event) {
    this.userService.getData().then(res => {
      event.target.complete();
    });
  }

  loadData(event) {
    console.log('Load more data');

    this.userService.getData().then(res => {
      event.target.complete();
    });
  }

Here is home.html

<ion-infinite-scroll (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="loading ...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
2

Is the data being returned from getData() paginated?

3

not yet, it will duplicate at the center. For example, start page 1 until 10. It will repeat page 3 or other page two time

4

Each time you add new items to your list, you can apply a distinct.
In my case I use the LODASH library.

I’m using uniqWith method.
For example.

let data=[
         {
           title:"you title"
          },{
           title:"you title2"
          }
        ]

WHEN THE SCROLL EVENT ADD MORE TEST, I WOULD HAVE SOMETHING SO.

loadData(event) {
    console.log('Load more data');

    this.userService.getData().then(res => {
       this.data.push(res)  //I add the new data
     //Suppose 23 comes as follows
  /*
          {
           title:"you title 4"
          },{
           title:"you title2" --this element already exists in the data so it would have to be deleted in order not to show it
          }
     I would do the following with lodash
 */

  this.data= _.uniqWith(this.data, _.isEqual) //removed one of the duplicate items
 

      event.target.complete();
    });
  }

See more these https://lodash.com/docs/4.17.15#uniqWith

5

but if I do like this, if same data is at page 3 but I need to load until last page. It will stop at equal page right?

this.data= _.uniqWith(this.data, _.isEqual) //removed one of the duplicate items
 

      event.target.complete();
    });
6

Remember that this is an infinite scroll, what it does is create a long list, and each request we could call the page, and every time new data falls to the list the filter is applied so that the elements are not repeated, in that almost if they are the same in everything, if something inside the keys makes them different then it will come out, in that case you have to evaluate what data they bring to see if what lodash method to use