Display records by timestamp from REST API

Ionic Framework ionic-v3
1

Hi there,

I hope someone can guide me on how I can sort the ion-list by a timestamp

the variable = post.acf.time in the following code is the Time-stamp I need to use

<ion-list>
    <button ion-item *ngFor="let post of data"  (click)="itemTapped($event, post)" >
            <h2 [innerHTML]="post.title.rendered"></h2>
            <p><span [innerHTML]="post.acf.event_category"></span></p>
            <p><span [innerHTML]="post.acf.time"></span></p>
    </button>
  </ion-list>

the .TS file is pulling in the Data from my site’s REST API on WordPress

export class WpApi {

  data: any = null;
  url: string = 'https://mysite.com/wp-json/wp/v2/event';

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
        this.getPosts();
  }

  ionViewDidLoad() {
    //console.log('ionViewDidLoad WpApi');
  }

  getPosts() {
  this.http.get(this.url)
    .map(res => res.json())
    .subscribe(data => {
      // When the request is complete, we'll get our data here
      this.data = data;
      // console.log(data);
    });
  }

Here is the JSON File from the REST API
The path of the timestamp is “acf” > “time”

{
        "id": 24953,
        "date": "2017-04-18T14:44:30",
        "date_gmt": "2017-04-18T14:44:30",
        "guid": {
            "rendered": "https://mysite.com/?post_type=event&#038;p=24953"
        },
        "modified": "2017-04-18T14:44:30",
        "modified_gmt": "2017-04-18T14:44:30",
        "slug": "customer-case-study",
        "status": "publish",
        "type": "event",
        "link": "https://mysite.com/event/2017/customer-case-study/",
        "title": {
            "rendered": "Customer Case Study"
        },
        "content": {
            "rendered": "<p>Real Customer Case Studies is a session dedicated to ... </p>\n",
            "protected": false
        },
        "featured_media": 0,
        "parent": 0,
        "template": "",
        "acf": {            
            "whole_day_event": false,
            "time": "1510218000",
            "end_time": "1510220700"
        },

}

I’m very New to Ionic and Angular and my question seems very basic compared to some of the topics i have searched

I have tried to implement the DateTime component from this documentation:

but i’m not getting anywhere productive so far as i’m not sure how to implement this code.

Many Thanks for any guidance and Help you can give in this matter

Kind Regards

2

That something you should do when your items come in. Move your function to get the posts into a service. Something like this:

  getPosts() {
    this.http.get(this.url)
    .map(res => {
      result = res.json();
      return response.sort( (a, b) => {
        return a.acf.time - b.acf.time;
      });
    })
  }

Then in your page, get the posts from the service:

getPostsFromService() {
  this.myDataService.getPosts().subscribe(
    (result) => {
      this.data = result;
    }
    (err) => {
      console.warn(err);
    },
    () => {
      console.log('done getting results');
    }
   )
}
2 Likes
3

Great!!
Thank you so much luukschoen!
This is a massive help, plenty for me to study from your response.
I hope to get the hang of this yet!!
Kind Regards
:slight_smile: