Infinite scroll with https.get for API controller


#1

Any one give me a infinite scroll for ionic 2 … using http.get action


#2

Did you try just adapting the examples in the docs? Swapping out those fake async operations for http.get should be pretty straightforward.


#3

Finally!, i got my answer for https.get api list with infinite scroll
Here is my code,

let values = ‘BusinessUnitId=’ + this.BusinessUnitId;
this.token = sessionStorage.getItem(‘token’);
this.body = 'bearer ’ + this.token;
let headers = new Headers({ ‘Content-Type’: ‘application/json; charset=utf-8’, ‘Authorization’: this.body });
let options = new RequestOptions({ headers: headers });
this.http.get(sessionStorage.getItem(‘url’) + ‘/api/HREmployees?’ + values).map(res => res.json()).subscribe(data => {
this.loading = false;
this.employeesList = data;
this.imageList1 = data;
this.items = data;
let images = data
for (var i = 0; i < 10; i++) {

            for (var j = 0; j < this.employeesList.length; j++) {

                if (i === j) {
                    this.arr.push(this.employeesList[i]);


                    this.imageList = this.arr;


                }
            }




        }





        //  this.initializeItems();
        console.log(data);
    }, (err) => {
        console.log(err);

        this.loading = false;
    });

doInfinite(): Promise {
console.log(‘Begin async operation’);

    return new Promise((resolve) => {
        setTimeout(() => {
            var flag = false;
        
            if (this.count > this.imageList1.length) {
                this.count = this.imageList1.length
             
            

            }
            for (var i = (this.imageList.length); i < this.count; i++) {

                            this.arr.push(this.employeesList[i]);
                            this.imageList = this.arr;
                  
            }
            this.count += 10;


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

html:

<ion-item *ngFor="let employee of imageList; let index=index" (click)="itemTapped($event, employee)">
  <ion-avatar item-left>
    <img src="assets/user.png" />
  </ion-avatar>

  <div>
    <h2><b>{{employee.Name}} </b></h2>
    <div>
      <ion-icon style="float: right" name="ios-arrow-forward"></ion-icon>
    </div>
    <p style="padding-top: 7px">{{employee.Designation}}</p>

  </div>

  <div id="wrapper" style="padding-top: 7px">
    <div id="content">
      <p> {{employee.NRICorFIN}}</p>
    </div>
    <div id="sidebar1">
      <p>{{employee.DepartmentName}}</p>
    </div>
    <div id="cleared"></div>
  </div>