Appending New Elements To Same Page

Ionic Framework ionic-v3
1

My question is how can I display first 50 elements into a page, than append next 50 elements or more to same page?
I’m using Promise data service to get data and would like to implement button which will append next 50 elements and so on.

  getData() {
        var headers = new Headers();
	    headers.append('Content-Type', 'application/x-www-form-urlencoded');

   return new Promise(resolve => {
		this.http.get('http://middle.t/index.php/posts?limit=1-'+this.limit', {headers: headers}).subscribe(data => {
			if(data.json()) {
				this.result = data.json().posts;
                                   this.max_posts = data.json().total_posts;
                	        } 
		});
	});

}

2 
> html code:
>    <ion-item *ngFor="let post of result" (click)="single_post($event, post.post_id)">
>      				<ion-avatar>
>     					<img src="{{ post.image[0] }}" />
>     				</ion-avatar>
>     				<div class="item-info">
>      					<h2 class="item-title">{{ post.post_title }}</h2>
>     				<p class="item-time">
>      						<time>{{ post.date }}</time>
>      					</p>
>     				</div>
>     			</div>
>     		</ion-item>
3

hi @nadreal1010,

you can do like these way,

public limit = 50;
public result = [];

loadMore() {  // call click of button
   if( this.limit < this.max_posts) {
         this.limit += 50;
         this.getData();
   }
}

getData() {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    return new Promise(resolve => {
	this.http.get('http://middle.t/index.php/posts?limit='+(this.limit-49)+'-'+this.limit', {headers: headers}).subscribe(data => {
	    if(data.json()) {
	       data.json().posts.foreach((post) => this.result.push(post));
               this.max_posts = data.json().total_posts;
            } 
	});
});
5

Hello @itsmemyk, thanks for fast reply but it throws next exception:

browser_adapter.js:84 EXCEPTION: TypeError: Cannot read property ‘push’ of undefined

6

I dont know, may be somewhere in ts file, you are assigning value to result, Error saying that result must be array. Please check your code, maybe somewhere it gets null or share some code snippet?

1 Like
7

yes result is the array

8

you can use the ion-infinite-scroll
few points you need to do some basic backend logic here at first retrieve the required amount of data only
later you can push the data when you scroll down

2 Likes
9

@Thavarajan this is exactly what I need, main logic is not to retrieve data in single get method.

10

this part of code is wrong:

data.json().posts.foreach((post) => this.result.push(post));

data.json().posts is the array of posts: object0,object1,object2; where each object holds image, title and other attributes.

My html code might confused you:

<ion-item *ngFor="let post of result" (click)="single_post($event, post.post_id)">

post is just a temporary variable, instance of array result, where data’s - objects are loaded.