Refresh your content with the pull-to-refresh feature in Ionic 2

Question

Refresh your content with the pull-to-refresh feature in Ionic 2

latest-news.html

update function

<ion-refresher (ionRefresh)="doUpdate($event)">
    <ion-refresher-content pullingText="pull to update">

    </ion-refresher-content>
</ion-refresher>

retrieve latest news from server

<ion-list *ngSwitchCase="'latest-news'">
      <ion-card>
          <ion-item-group (click)="viewLatestNewsDetail(latest)" text-wrap *ngFor="let latest of latestNews">

            <ion-thumbnail *ngIf="latest.Preview_image1" item-start>
              <img src="{{latest.Preview_image1}}">
            </ion-thumbnail>

            <ion-card-content>
              <ion-item>
                <ion-card-title>{{latest.title}}</ion-card-title>
                <p>{{latest.news_category}}</p>
                <h3>{{latest.publish_time}}</h3>
              </ion-item>
            </ion-card-content>

          </ion-item-group>
      </ion-card>
    </ion-list>

latest-news.ts

  doUpdate(refresher){

    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 1500);

  }

retrieve latest news data

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public newsData:NewsDataProvider){
    this.retrieveLatestNews();
  }
  retrieveLatestNews() {
      this.newsData.getLatestNews().then(data => {
        this.latestNews = data;
      });
  }

I am attempting to update the latest news list and fetch new news data from the server. Although this code is sourced from the Ionic2 documentation, I am encountering issues.

Edit: The following code snippet is what I included in latest-news.ts. There are no errors displayed, but after performing the update, the news list remains empty.

  doUpdate(refresher){

    this.retrieveLatestNews().then(() => {
      refresher.complete();
    });

  }

  retrieveLatestNews(): Promise<any> {
      return this.newsData.getLatestNews().then(data => {
        this.latestNews = data;
      });
  }

angular typescript ionic2 rxjs ionic3

Answer 1

Answer №1

Have you tried calling your getNews method from within the doRefresh function?

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              public newsData: NewsDataProvider){
    this.getNews();
  }

  getNews(): Promise<any> {
      return this.newsData.getNews().then(data => {
        this.news = data;
      });
  }

  doRefresh(refresher) {
    this.getNews().then(() => {
      refresher.complete();
    });
  }

EDIT

After debugging the code, it was discovered that the service was storing a local copy of the data:

getNews() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      this.http.get('servertrj.com/api/news/index/…').map(res => res.json().data).subscribe(data => {
        this.data = data;
        resolve(this.data);
      });
    });
  }

When the pull to refresh attempted to fetch new data, the service returned the same list of items. Updating the method as shown below should resolve this issue:

  getNews() {
    return new Promise(resolve => {
      this.http.get('servertrj.com/api/news/index/…').map(res => res.json().data).subscribe(data => {
        this.data = data;
        resolve(this.data);
      });
    });
  }

Alternatively, instead of creating a new promise like that, you can use the toPromise operator from RxJS:

  getNews(): Promise<any> {
    return this.http.get('servertrj.com/api/news/index/…')
                    .map(res => res.json().data)
                    .toPromise();
  }

Answer 2

Have you tried calling your getNews method from within the doRefresh function?

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              public newsData: NewsDataProvider){
    this.getNews();
  }

  getNews(): Promise<any> {
      return this.newsData.getNews().then(data => {
        this.news = data;
      });
  }

  doRefresh(refresher) {
    this.getNews().then(() => {
      refresher.complete();
    });
  }

EDIT

After debugging the code, it was discovered that the service was storing a local copy of the data:

getNews() {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      this.http.get('servertrj.com/api/news/index/…').map(res => res.json().data).subscribe(data => {
        this.data = data;
        resolve(this.data);
      });
    });
  }

When the pull to refresh attempted to fetch new data, the service returned the same list of items. Updating the method as shown below should resolve this issue:

  getNews() {
    return new Promise(resolve => {
      this.http.get('servertrj.com/api/news/index/…').map(res => res.json().data).subscribe(data => {
        this.data = data;
        resolve(this.data);
      });
    });
  }

Alternatively, instead of creating a new promise like that, you can use the toPromise operator from RxJS:

  getNews(): Promise<any> {
    return this.http.get('servertrj.com/api/news/index/…')
                    .map(res => res.json().data)
                    .toPromise();
  }

Refresh your content with the pull-to-refresh feature in Ionic 2

Answer №1

Similar questions

Converting a text file to JSON in TypeScript

Verify that the current date is not present in Cypress

Is it possible to automatically switch to a different route in a Next.js server component after a certain period of time?

What is the best way to transfer an array to a different component?

Exploring the power of EJS with conditional logic

Dynamic starting point iteration in javascript

Encountering an error while using TypeScript, Mocha, and Express: "TypeError: app.address is not a

What is the method to dynamically add an error to a FormGroup control using programming?

guide on implementing optional URL parameters in NestJS

Error message thrown when attempting to execute foundation() function in Karma Unit Test for Angular 5 with Foundation integration

What causes error TS2339 to occur: The property 'classList' is not found on type 'never'

Changing function arguments in TypeScript using the spread operator

In search of a practical and functional demonstration showcasing Electron v8 combined with TypeScript

The Vue instance seems to be unable to recognize the shims-vue.d.ts file

Error in Angular 2+: Internet Explorer 11 fails to retrieve property 'call' due to undefined or null reference

Adding dynamic elements in Ionic2 and AngularJS can be achieved by using the correct syntax and functions provided

Choose the object's property name using TypeScript through an interface

Troubleshooting issue with Angular2 Dart ngFor not refreshing view with WebSockets data stream

Generating a composer method in TypeScript (Flow $Composer)

Is there a way to establish a connection between two excel entries using Angular?