How to auto update data on ionic page with out refreshing the page

Ionic Framework ionic-v3
1

Hi,
I created a page that contains a button, upon clicking on that i am calling a rest api that responses me some data and am showing it below the button.so, when a click is made on the button again, the data changes on the view.but, i just wana do something like with out clicking on the button everytime, display the updated data from rest api.

2

I suppose you could schedule a periodic task that does whatever clicking on the button does, but I would take some time to seriously think about whether your users really want this.

3

Iet me make it more clear, its just like displaying a weather report, instead of user requesting evertime, just display the latest values.

4

Rxjs should work here, but haven’t tested it. Also error handling is missing.

import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/mergeMapTo';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-weather',
  template: `
    <ion-content>
    <h2>{{(data | async)?.city}}</h2>
    <p *ngIf="(data | async)">{{(data | async)?.degree}}°C</p>
    </ion-content>
  `
})
export class WeatherPage {
  data: any;
  constructor(private http: Http) {
    this.getWeather();
  }

  private getWeather() {
    this.data = Observable
    .interval(10000)
    .mergeMapTo(this.fetchWeatherData())
    .map(res => res.json());
  }

  private fetchWeatherData() {
    return this.http.get('http://myUrl.com/api/weather');
  }

}
1 Like