How do you cache http request using this method


#1

Im using a provider that looks like this

export class DataProvider {

  private rootUrl: string = 'https://exampleurl.com';
  private posts: string = 'posts';
  public pagenumber: number = 2;
  public Categories:any = [];
  public per_page: string = '?per_page='
  public perpage: number = 10;
  public page: string ='&page='
 constructor(public http: Http, private cache: CacheService, public storage: Storage) {
    console.log('Hello DataProvider Provider');
  }

  getPosts(pagination) {
    return this.http.get(`${this.rootUrl}/${this.posts}/${this.per_page}${this.perpage}${this.page}`+pagination)
    .toPromise().then(data => data.json());
    
  }

  getPostById(id: number) {
    return this.http.get(`${this.rootUrl}/${this.posts}/${id}`).map(res => res.json());
  }

and this is the post page.

export class PostsPage {

  //posts: Observable<any>;
  posts: any;
  post: any = [];

 
  private isLoading: boolean = false;
  private category_id: number = 0;
  cat_id: number;

  pagination: number = 1;




  constructor(public http: Http,
    public navCtrl: NavController,
    public navParams: NavParams,
    private data: DataProvider
  ) {
    if (this.navParams.get('cat_id') != null && this.navParams.get('cat_id') != undefined) {
      this.category_id = this.navParams.get('cat_id');
    }
    console.log(this.navParams.get('cat_id'));
    this.getPosts();
    


  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad PostsPage');
  }


  getPosts() {
    /// this.posts = this.data.getPosts();
    //this.posts = data
    this.data.getPosts(this.pagination).then(data => {
    this.posts = data; 
    });
    
    
  }



  doRefresh(refresher) {
    this.data.getPosts(this.pagination)
      .then(data => {
        for (let i of data) {
          this.posts.push(i);
        }
        refresher.complete();
      });
  }


  navigateToDetail(postId: number, item) {
    this.navCtrl.push('PostDetailPage', {postId: postId, post: item, });
  }


 doInfinite(infiniteScroll) {
    this.pagination++;
    this.data.getPosts(this.pagination)
      .then(data => {
        for (let i of data) {
          this.posts.push(i);
          
        }
        infiniteScroll.complete();
      });


 }


}

this is my post-detail.ts

export class PostDetailPage {

  private postId: number
  private post: Observable<Post>;
  

  constructor(
    private data: DataProvider,
    public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController ) {
  
    }

  ionViewDidLoad() {
    this.viewCtrl.showBackButton(true);
    this.postId = this.navParams.get('postId');
    console.log(this.postId);
    this.post = this.data.getPostById(this.postId);
    //console.log(this.data.getPostById)
    
  }
  


}

How do I cache this to make the posts in the app available when their is no internet connection?
If I use set ang get method, I can storage the post on the posts page. But on the post detail page It shows blank page because its using the getPostById function from the provider. Is there any way I can cache both pages?


How to show all objects in an array with the same name
#2

Any Help with this??