Make InfiniteScroll with Ionic 3

Question

I'm using symfony3 and FosRestBundle for backend and Ionic 3 for frontend.

I have followed the documentation of Ionic to make an InfiniteScroll but I didn't reach to do it. Just the loading text and the spinner appear and no data is pushed.

This is the backend action :

/**
 * @Rest\Get(
 *     path="/articles",
 *     name="api_article_list"
 * )
 * @Rest\QueryParam(
 *     name="limit",
 *     requirements="\d+",
 *     default="5",
 *     description="Maximum element per page"
 * )
 * @Rest\QueryParam(
 *     name="offset",
 *     requirements="\d+",
 *     default="0",
 * )
 * @Rest\View(StatusCode=201, serializerGroups={"list"})
 *
 */
public function listAction(Request $request, ParamFetcherInterface $paramFetcher)
{

    $em = $this->getDoctrine()->getManager();

    $articles = $em->getRepository('AppBundle:Article')->findBy(
        array(),
        array('id' => 'desc'),
        $paramFetcher->get('limit'), $paramFetcher->get('offset')
    );

    return $articles;
}

and this is th typescript code :

export class NewsPage {

results = [];
moreData = [];

constructor(public navCtrl: NavController, private http: Http, public loadingCtrl: LoadingController) {
    this.getData();
}

getData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit +'&offset=' + this.offset )
        .map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

loadMoreData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit +'&offset=' + this.offset )
        .map(res => res.json()).subscribe(data => {
        this.moreData = data;
    });
}

doInfinite(infiniteScroll) {
    this.offset += 2;

    this.loadMoreData();

    setTimeout(() => {

        infiniteScroll.complete();
    }, 500);
}

As you can see , the two functions getData() and loadMoreData() are similar but the first for variable results and the second is for variable moreData. This is just my thinking and I doubt if it is a correct method.

This is the html code:

<ion-card *ngFor="let result of results; let i = index">
   <ion-item> {{result.id }}</ion-item>
//............
</ion-card>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">

  <ion-infinite-scroll-content loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

Answer 1

Solved

results = [];
limit: number = 5;
offset: number = 0;

//****

getData() {
    this.http.get(Globals.baseUrl + 'articles')
        .map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

loadMoreData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit + '&offset=' + this.offset)
        .map(res => res.json()).subscribe(data => {
        for (let item of data) {
            this.results.push(item);
        }
    });

}

doInfinite(infiniteScroll) {
    this.offset += 5;
    setTimeout(() => {
        this.loadMoreData();
        infiniteScroll.complete();
    }, 500);
}