title: How to display posts from specific category in Ionic App Page
body: <p>I want to display all posts from a specific category e.g <strong>Works</strong> with id <strong>1</strong> in my wordpress site to the WorksPage in my Ionic app.</p>
  
  <p>Below is the code that displays all the recent post on the main page/Home screen.
  <strong>HOMEPAGE/ALL --  home.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { PostPage } from '../post/post';
  import { NavController, LoadingController, NavParams } from 'ionic-angular';
  import { WordpressService } from '../../services/wordpress.service';
  import { AuthenticationService } from '../../services/authentication.service';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  
    posts: Array&lt;any&gt; = new Array&lt;any&gt;();
    morePagesAvailable: boolean = true;
    loggedUser: boolean = false;
  
    categoryId: number;
    categoryTitle: string;
  
    constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public loadingCtrl: LoadingController,
      public wordpressService: WordpressService,
      public authenticationService: AuthenticationService
    ) {}
  
    ionViewWillEnter() {
      this.authenticationService.getUser()
      .then(
        data =&gt; this.loggedUser = true,
        error =&gt; this.loggedUser = false
      );
      this.morePagesAvailable = true;
  
      //if we are browsing a category
      this.categoryId = this.navParams.get('id');
      this.categoryTitle = this.navParams.get('title');
  
      if(!(this.posts.length &gt; 0)){
        let loading = this.loadingCtrl.create();
        loading.present();
  
        this.wordpressService.getRecentPosts(this.categoryId)
        .subscribe(data =&gt; {
          for(let post of data){
            post.excerpt.rendered = post.excerpt.rendered.split('&lt;a')[0] + "&lt;/p&gt;";
            this.posts.push(post);
          }
          loading.dismiss();
        });
      }
    }
  
    postTapped(event, post) {
      this.navCtrl.push(PostPage, {
        item: post
      });
    }
  
    doRefresh(refresher) {
      console.log('Begin async operation', refresher);
  
      setTimeout(() =&gt; {
        console.log('Async operation has ended');
        refresher.complete();
      }, 2000);
    }
  
  
    doInfinite(infiniteScroll) {
      let page = (Math.ceil(this.posts.length/10)) + 1;
      let loading = true;
  
      this.wordpressService.getRecentPosts(this.categoryId, page)
      .subscribe(data =&gt; {
        for(let post of data){
          if(!loading){
            infiniteScroll.complete();
          }
          post.excerpt.rendered = post.excerpt.rendered.split('&lt;a')[0] + "&lt;/p&gt;";
          this.posts.push(post);
          loading = false;
        }
      }, err =&gt; {
        this.morePagesAvailable = false;
      })
    }
  
    /*logOut(){
      this.authenticationService.logOut()
      .then(
        res =&gt; this.navCtrl.push(LoginPage),
        err =&gt; console.log('Error in log out')
      )
    }
  
    goToLogin(){
      this.navCtrl.push(LoginPage);
    }*/
  }
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>     &lt;ion-list *ngFor="let post of posts" (click)="postTapped($event, post)" class="cardList"&gt;
      &lt;ion-card-content class="innerContent"&gt; 
        &lt;ion-grid&gt;
          &lt;ion-row class="entityParams"&gt;
             &lt;ion-col class="img" col-2&gt;&lt;img id="roundpic" src="{{post.images.medium}}" class="thumbs" /&gt;
             &lt;/ion-col&gt;
              &lt;ion-col col-10 class="ParamsInner"&gt;
                &lt;ion-row class="entity"&gt;{{post.custom_fields.entity}} &lt;/ion-row&gt;
                &lt;ion-row class="method"&gt;&lt;ion-icon name="clipboard"&gt;&lt;/ion-icon&gt; {{post.custom_fields.method}}&lt;/ion-row&gt;
              &lt;/ion-col&gt;
          &lt;/ion-row&gt;
          &lt;ion-row class="ptb"&gt;
            &lt;span [innerHTML]="post.title.rendered" class="postTitle"&gt;&lt;/span&gt;
          &lt;/ion-row&gt;
          &lt;ion-row class="cardbottom"&gt;
            &lt;ion-col col-8 class="ref_number dotted-spaced-ref"&gt; &lt;ion-icon name="radio-button-on"&gt;&lt;/ion-icon&gt; {{post.custom_fields.ref_number}} &lt;/ion-col&gt;
            &lt;ion-col col-4 class="deadline dotted-spaced-dline"&gt;&lt;ion-icon name="calendar"&gt;&lt;/ion-icon&gt; Ending:&lt;br /&gt;{{post.custom_fields.deadline}}&lt;/ion-col&gt;
          &lt;/ion-row&gt;
        &lt;/ion-grid&gt;
      &lt;/ion-card-content&gt;
    &lt;/ion-list&gt;  
  </code></pre>
  
  <p><strong>Config file.ts</strong></p>
  
  <pre><code>//config constants
  export const WORDPRESS_URL = 'http://www.example.com/wp/';
  export const WORDPRESS_REST_API_URL = WORDPRESS_URL + 'wp-json/wp/v2/';
  </code></pre>
  
  <p>I have tried placing the code below in my <strong>works.ts</strong> file but instead it displays all recent posts and not posts of specific category(works)</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { PostPage } from '../post/post';
  import { IonicPage, NavController, LoadingController, NavParams } from 'ionic-angular';
  import { WordpressService } from '../../services/wordpress.service';
  import { AuthenticationService } from '../../services/authentication.service';
  
  /**
   * Generated class for the WorksPage page.
   *
   * See https://ionicframework.com/docs/components/#navigation for more info on
   * Ionic pages and navigation.
   */
  
  @IonicPage()
  @Component({
    selector: 'page-works',
    templateUrl: 'works.html',
  })
  export class WorksPage {
  
    posts: Array&lt;any&gt; = new Array&lt;any&gt;();
    morePagesAvailable: boolean = true;
    loggedUser: boolean = false;
  
    categoryId: number;
    categoryTitle: string;
  
   constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public loadingCtrl: LoadingController,
      public wordpressService: WordpressService,
      public authenticationService: AuthenticationService
    ) {}
  
    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad WorksPage');
      //if we are browsing a category
      this.categoryId = this.navParams.get(1);
      this.categoryTitle = this.navParams.get('title');
  
      if(!(this.posts.length &gt; 0)){
        let loading = this.loadingCtrl.create();
        loading.present();
  
        this.wordpressService.getRecentPosts(this.categoryId)
        .subscribe(data =&gt; {
          for(let post of data){
            post.excerpt.rendered = post.excerpt.rendered.split('&lt;a')[0] + "&lt;/p&gt;";
            this.posts.push(post);
          }
          loading.dismiss();
        });
      }
    }
  
  
    postTapped(event, post) {
      this.navCtrl.push(PostPage, {
        item: post
      });
    }
  
    doInfinite(infiniteScroll) {
      let page = (Math.ceil(this.posts.length/10)) + 1;
      let loading = true;
  
      this.wordpressService.getRecentPosts(this.categoryId, page)
      .subscribe(data =&gt; {
        for(let post of data){
          if(!loading){
            infiniteScroll.complete();
          }
          post.excerpt.rendered = post.excerpt.rendered.split('&lt;a')[0] + "&lt;/p&gt;";
          this.posts.push(post);
          loading = false;
        }
      }, err =&gt; {
        this.morePagesAvailable = false;
      })
    }
  
  }
  </code></pre>
  
  <p><strong><em>Added Edit</em></strong>
  there is this code being used in <strong>services.ts</strong> file</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import * as Config from '../config';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/observable/forkJoin';
  
  @Injectable()
  export class WordpressService {
    constructor(public http: Http){}
  
    getRecentPosts(categoryId:number, page:number = 1){
      //if we want to query posts by category
      let category_url = categoryId? ("&amp;categories=" + categoryId): "";
  
      return this.http.get(
        Config.WORDPRESS_REST_API_URL
        + 'posts?page=' + page
        + category_url)
      .map(res =&gt; res.json());
    }
  
    getComments(postId:number, page:number = 1){
      return this.http.get(
        Config.WORDPRESS_REST_API_URL
        + "comments?post=" + postId
        + '&amp;page=' + page)
      .map(res =&gt; res.json());
    }
  
    getAuthor(author){
      return this.http.get(Config.WORDPRESS_REST_API_URL + "users/" + author)
      .map(res =&gt; res.json());
    }
  
    getPostCategories(post){
      let observableBatch = [];
  
      post.categories.forEach(category =&gt; {
        observableBatch.push(this.getCategory(category));
      });
  
      return Observable.forkJoin(observableBatch);
    }
  
    getCategory(category){
      return this.http.get(Config.WORDPRESS_REST_API_URL + "categories/" + category)
      .map(res =&gt; res.json());
    }
  
    createComment(postId, user, comment){
      let header: Headers = new Headers();
      header.append('Authorization', 'Bearer ' + user.token);
  
      return this.http.post(Config.WORDPRESS_REST_API_URL + "comments?token=" + user.token, {
        author_name: user.displayname,
        author_email: user.email,
        post: postId,
        content: comment
      },{ headers: header })
      .map(res =&gt; res.json());
    }
  }
  </code></pre>