I'm trying to display all items in a category. I have the slug or the keyword of a category, I can use that to identify the parent category, I get the parent category and use that to search for all categories having similar parent. I have two pagination related errors, the errors are related.
The url ads_url: https://jokerleb.com/wp-json/wp/v2/ads?per_page=100&&page=. For example page=1
service
getAds(page): Observable<any[]> {
return this.http.get(this.api_url + page)
.flatMap((ads: any[]) => {
if (ads.length > 0) {
return Observable.forkJoin(
ads.map((ad: any) => {
return this.http.get(this.ads_thumb_url + ad.id)
.map((res: any) => {
let media: any = res;
ad.media = media;
return ad;
});
})
);
}
return Observable.of([]);
});
}
ts
constructor(public navCtrl: NavController, public navParams: NavParams, public renderer: Renderer, public zone: NgZone, public adsProvider: AdsProvider) {
this.category = this.navParams.get('category');
this.loadAds();
}
loadAds(infiniteScroll?) {
this.adsProvider.getAds(this.page).subscribe((data: any) => {
if (!this.category.main) {
if (this.category.slug) {
for (let i = 0; i < data.length; i++) {
if (data[i] !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].slug.trim().toLowerCase() === this.category.slug.trim().toLowerCase()) {
this.item_category = data[i].pure_taxonomies.ad_cat[0].term_id;
break;
}
}
}
if (this.item_category !== undefined) {
for (let i = 0; i < data.length; i++) {
if (data[i].pure_taxonomies !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].term_id === this.item_category ||
data[i].pure_taxonomies.ad_cat[0].slug.trim().toLowerCase() === this.category.slug.trim().toLowerCase()) {
this.items.push(data[i]);
}
}
}
}
}
} else {
if (this.category.main === 2) {
for (let i = 0; i < data.length; i++) {
if (data[i] !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].slug.trim().toLowerCase() === this.category.slug.trim().toLowerCase()) {
this.item_category = data[i].pure_taxonomies.ad_cat[0].parent;
break;
}
}
}
if (this.item_category !== undefined) {
for (let i = 0; i < data.length; i++) {
if (data[i].pure_taxonomies !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].parent === this.item_category) {
this.items.push(data[i]);
}
}
}
}
}
}
if (infiniteScroll) {
infiniteScroll.complete();
}
});
}
loadMore(infiniteScroll) {
this.page++;
this.loadAds(infiniteScroll);
}
html
<ion-content fullscreen class="home-content" [ngSwitch]="tab">
<div *ngIf="items.length>0; then thenTemplateName else elseTemplateName">
</div>
<ng-template #thenTemplateName>
<div class="all-lists">
<div class="all-category" *ngSwitchCase="1">
<ion-card class="category-card" *ngFor="let item of items" (click)="onShowItemDetail(item);">
<span *ngIf="item.media.length">
<img src="{{item.media[item.media.length-1].media_details.sizes.medium.source_url}}" />
</span>
<div class="card-title" text-uppercase>
<h4 color="secondary">{{item?.title.rendered}}</h4>
</div>
</ion-card>
</div>
</div>
<ion-infinite-scroll (ionInfinite)="loadMore($event)" loadingSpinner="bubbles">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ng-template>
<ng-template #elseTemplateName>
<div class="all-lists">
<div class="all-category" *ngSwitchCase="1">
<ion-card text-center>
<ion-card-header>
This Category is empty
</ion-card-header>
<ion-card-content>
This Category is empty
</ion-card-content>
</ion-card>
</div>
</div>
</ng-template>
</ion-content>
Sometimes I get TypeError: Cannot read property '0' of undefined, if item not found, I don't get the error, the error happens if I scroll down too much, loadMore() function gets called, it finds nothing and I get the error.
I might have two problems in my code, due to loadMore and pagination, the first one being the error above and the second one is that sometimes the last 2 or 3 items don't show. Perhaps I'm increasing the page without checking if there are still items on to be displayed. I don't know how to fix that.
I think if there's a way to tell whether items exist before paginating, both errors will be fixed.
