0

I am trying to figure out a way to list the "latest upcoming events" using AngularJS consuming a JSON feed.

I want to grab today's current date (using either server or client side?) and then iterate through a JSON list and only print/filter the latest 2 upcoming events based on today's current date.***

Here's how I have my controller set up:

var app = angular.module('listApp', []);

app.controller('Ctrl', function($scope){
            $scope.events = [
        {
            "title": "All Day Event",
            "start": "2015-07-11"
        },
        {
            "title": "Long Event",
            "start": "2015-07-07"
        },
        {
            "title": "Repeating Event",
            "start": "2015-07-16"
        },
        {
            "title": "Repeating Event",
            "start": "2015-07-10"
        }
      ]         
    });

Here's my view:

<body ng-app="listApp">

<div class="container" ng-controller="Ctrl">

<h3>Upcoming events:</h3>

    <ul ng-repeat="event in events | limitTo: 2">
        <li>{{ event.title }}</li>
        <li>{{ event.start }}</li>
    </ul>

</div><!--/.container-->

I think I need to write a conditional statement in the controller utilizing the Date.now(), but I am unsure how to get started. Perhaps I am on the wrong path and someone else has a better approach?

redshift
  • 4,815
  • 13
  • 75
  • 138
  • Have you tried using orderBy? https://docs.angularjs.org/api/ng/filter/orderBy – manu29.d Jul 09 '15 at 15:52
  • yes but it's showing the past dates as more "latest" and I want to hide those because it's not an "upcoming event". Hope that makes sense. – redshift Jul 09 '15 at 16:39
  • `orderBy: '+ve-attr'` means arrange in ascending order -> will give you the oldest first because that is the smallest. To reverse the order use `orderBy: '-ve-attr'`. See the last line in the longer answer. – manu29.d Jul 09 '15 at 17:17
  • Correct but I have some dates in the JSON that are a year from now. When I reverse like you said, those will be first....but need the events closest to today's date. – redshift Jul 09 '15 at 18:07
  • IDK. It seems to work for me. http://plnkr.co/edit/YXPS5Kf1HY3E2eKoRndk?p=preview – manu29.d Jul 09 '15 at 18:20
  • I think I'm not making sense:) What I am saying is that today is July 9, so the "upcoming events" should be July 9, July 10, July 11...etc and not start with July 15 as your examples shows. – redshift Jul 09 '15 at 23:49

2 Answers2

0

Order by date (created_at), reverse it and limit the ordered to 2.

Here is an example:

Descending order by date filter in AngularJs

Community
  • 1
  • 1
pro
  • 792
  • 7
  • 30
  • Should this work in his case? the date format is not consistent it seems. – manu29.d Jul 09 '15 at 16:03
  • The problem with this method is that it's counting the past dates as more "latest". So, need a way to have angular filter based on today's (current) date and not show the previous dates to today's date. – redshift Jul 09 '15 at 16:33
0

You need to convert your start String to Date using Date function, then you can implement custom filter to get upcoming events and order them by date. After that you can apply limitTo on it. Please find the code below.

app.controller('EventController', function($scope){
    $scope.events = [
        {
            "title": "All Day Event",
            "start": new Date("2015-07-11")
        },
        {
            "title": "Long Event",
            "start": new Date("2015-07-07")
        },
        {
            "title": "Repeating Event",
            "start": new Date("2015-07-16T16:00:00-05:00")
        },
        {
            "title": "Repeating Event",
            "start": new Date("2015-07-09T16:00:00-05:00")
        }
    ];         
});

Custom filter:

app.filter('upcomingEvents', function () {
    return function (input) {

        var upcomingEvents = [];

        upcomingEvents = input.filter(function (data) {
            var currentDate = new Date();

            if ((data.start - currentDate) >= 0) {
                return true;
            } else {
                return false;
            }
        });

        upcomingEvents.sort(function (a, b) {
            return a.start - b.start;
        });

        return upcomingEvents;
    };
});

And HTML

<div ng-controller="EventController">

    <h3>Upcoming events:</h3>

    <ul ng-repeat="event in events | upcomingEvents | limitTo: 2">
        <li>{{ event.title }}</li>
        <li>{{ event.start }}</li>
    </ul>

</div>

I have implemented "upcomingEvents" above and used it in my HTML.

Please feel free to ask in case you have doubt.

Chirag Rupani
  • 56
  • 4
  • The problem with this method is that it's counting the past dates as more "latest". So, need a way to have angular filter based on today's (current) date and not show the previous dates to today's date. – redshift Jul 09 '15 at 16:37
  • I have implemented custom filter to get the functionality you want. Please refer my edited answer. – Chirag Rupani Jul 10 '15 at 07:02