Ionic list pages wordpress api rest, image, title and content

Ionic Framework ionic-v3
1

Hi guys, can you help me with something that’s making me hotheaded, please?

This is the new one with the development of the angular ionic, and the api api, it is necessary to list the wordpress, with title, abstract and image, it will be a list of pages, it is not a list of posts, but of a list of pages, and search list fetch the title, except and image in the list.

how can you help me

ionic, js angular, wordpress, api rest, pages, list, images, title, content.

1 Like
2

Server side (Wordpress), use it’s built in RSS feed function.

In Ionic, use this rad article to read the RSS feed (which is just XML).
http://masteringionic.com/blog/2016-12-18-parsing-xml-csv-and-tsv-files-with-ionic/

Probably 100 ways to do this, but that’s my $0.02.

3

Solution

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-articles',
  templateUrl: 'articles.html',
})

export class ArticlesPage {
  items: any;
  private searchItems: any;
  private url:string = "https://app.sitewp.com/wp-json/wp/v2/pages?_embed";
  public posts: Array<{}>;
  
  constructor(public http: Http,
              public navCtrl: NavController, 
              public navParams: NavParams) {

    this.http.get(this.url)
    .map(res => res.json())
    .subscribe(data => {
      console.log(data);
      this.posts = data;
      this.initializeItems(); 
    });    
  }

  initializeItems() {
    this.searchItems = this.posts;
  }

  getItems(ev: any) {
    this.initializeItems();
    let val = ev.target.value;
    if (val && val.trim() != '') {
      this.searchItems = this.searchItems.filter((item) => {
        return (item.title.rendered.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

  pageTapped(event, post) {
    let opt = {};
    this.navCtrl.push('PageDetailPage', {
      post: post
    }, opt);
  }

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

}
1 Like
4 
   <ion-list>
      <ion-item *ngFor="let post of posts" (tap)="pageTapped($event, post)">
            <ion-thumbnail item-start>
              <img src="{{ post._embedded['wp:featuredmedia']['0'].media_details.sizes.thumbnail.source_url }}">
            </ion-thumbnail>
            <h2 [innerHTML]='post.title.rendered'></h2>
            <p [innerHTML]='post.excerpt.rendered'></p>  
      </ion-item>
    </ion-list>
1 Like