My tech stack includes symfony3 and FosRestBundle for the backend, and Ionic 3 for the frontend development.
While attempting to implement an InfiniteScroll feature following the Ionic documentation, I encountered an issue where only the loading text and spinner were displayed without any data being fetched.
The backend action looks like this :
/**
* @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;
}
As for the 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);
}
The HTML code is as follows:
<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>