ionic2 infinit scroll with http request

Ionic Framework ionic-v3
1

HI all :)…
I’m trying to implement infinit-scroll with a request I made from a service.
The current example dousnt show where the data is coming from…
I’m not sure how to load the data to the list after getting it
Code:

    public products: any;
    constructor(private code4sa: Code4Sa) {

        this.getProducts();

    }

    getProducts() {

        this.code4sa.load()
            .then(data => {
                this.products = data;
            }); 
    } 

    doInfinite(infiniteScroll) {
        console.log('Begin async operation');

        setTimeout(() => {
            for (var i = 0; i < 30; i++) {
                this.products.push(this.products.length);
            }

            console.log('Async operation has ended');
            infiniteScroll.complete();
        }, 500);
    }

and in my view

    <ion-list>
        <ion-item *ngFor="#product of products">
            {{product.name}}
        </ion-item>
    </ion-list> 


    <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content loadingSpinner="bubbles"
                                     loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

Currently its only displaying blank tabs at the end. In other words I do not know how to only display 30 items fromthis.getProducts(); then keep on displaying more when you scroll down.

2

I solved this by creating a local variable containing the data and extending this data after a request. So I have the local variable Products and define it as an empty array. When the data comes in I execute:

this.products = this.products.concat(res.data);

To merge the old with the new data.

3

Hi @osi , Sorry for being a noob but where do I place this. is this the local variable res.data ?
Do I call this after getting the data ? could you provide more sample code

4

The res is the result from the API call. Something like this:

export class Product {

    productData = [];

    currentPage = 0;
    
    constructor(private product: ProductService) { }
  
    update(event?) {

            this.currentPage++;

            this.product.getProduct(this.currentPage).subscribe(res => {

                this.productData = this.productData.concat(res.data);

            });
        });

    }

}
5

thanks @osi but its not working for me. I’m not sure what I’m doing wrong