Order post By Date inside ng-repeat in View

Question

I am working on an angular app . here i need to show data in date order for user timeline

JS:

  $scope.comments =  [{"_id":"535e912cc6b93c7b30479454",
                       "created_at":"2014-04-28 23:04:36",
                       "post_id":"535e912cc6b93c7b30479453",
                       "type":"story",
                       "story":"[{"_id":"535e912cc6b93c7b30479454",
                                 "title":"test story",
                                 "content":"this is my story...",
                                 "created_at":2014-04-30 22:04:36"}]",
                        "article":"[]"
                       },
                      {"_id":"535e912cc6b93c7b30479454",
                       "created_at":"2014-04-25 23:04:36",
                        "post_id":"535e912cc6b93c7b30479453",
                       "type":"article"
                        "article":"[{"_id":"535e912cc6b93c7b30479454",
                                 "title":"test article",
                                 "content":"this is my article...",
                                 "created_at":2014-04-30 22:04:36"}]",
                        "story":"[]"
                         },----
                       //so on  
                        ]

View:

  <div ng-repeat = "data in comments">
    <div class="time">
      <span>{{data.created_at | DateFiltertoIso | date:'MMM-dd-yy'}}
    <div> 
     <div ng-switch-on="data.type">
       <div ng-switch-when="story">
        //switch layout adn get further story data by post_id
       </div>
   </div> 
    <div ng-switch-on="data.type">
      <div ng-switch-when="article">
       //switch layout adn get further article data by post_id
       </div>
   </div>
  </div>

   Expected Output is like

  Apr-04-14
    post1
    post2
   /all post for that date
  Apr-01-14
    post5
    post6
    //so on

I am getting

  Apr-04-2014 
     post1
  Apr-04-2014 
     post2
  Apr-04-2014 
     post3

I am newbie to angular. Any Help would be helpfull

You need to create a customer filter and use it in ng-repeat. — Reactgular, May 03 '14 at 11:34
[Similar question](http://stackoverflow.com/questions/19992090/angularjs-group-by-directive) — zishe, May 03 '14 at 11:36
Or you can create grouped hash like [this](http://odetocode.com/blogs/scott/archive/2013/08/08/group-and-display-data-with-underscore-and-angularjs.aspx) — zishe, May 03 '14 at 11:40

score 1 · Accepted Answer · edited May 06 '14 at 08:00

Try this

Working Demo

Html

   <div ng-controller="MyCtrl">
    <div ng-repeat="data in flattenedResults">
        <div class="time"> <span>
     <b>{{data.created_at | badDateToISO | date:'MMM-d-yy'}}  </b></span>
   <div> 

 <u ng-show="data.story.length>0">Stories</u>
   <div ng-repeat="story in data.story">
         {{story.title}}{{story.created_at}}
   </div>

 <u ng-show="data.article.length>0">Articles</u>
   <div ng-repeat="article in data.article">
         {{article.title}}
   </div>

Script

 var myApp = angular.module('myApp', []);
 myApp.filter('badDateToISO', function () {
 return function (badTime) {
    var goodTime = badTime.replace(/(.+) (.+)/, "$1T$2Z");
    return goodTime;
  };
});

  myApp.controller('MyCtrl', function ($scope) {
    $scope.flattenedResults = [];
    $scope.comments = [{
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-28 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "story",
        "story": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test story 1",
            "content": "this is my story... 2",
            "created_at": "2014-04-30 22:04:36"
    }],
        "article": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-28 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "article",
        "article": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test article 33",
            "content": "this is my article... 33",
            "created_at": "2014-04-30 22:04:36"
    }],
        "story": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-25 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "article",
        "article": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test article 1",
            "content": "this is my article... 1",
            "created_at": "2014-04-30 22:04:36"
    }],
        "story": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-28 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "story",
        "story": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test story 2",
            "content": "this is my story... 2",
            "created_at": "2014-04-30 22:04:36"
    }],
        "article": "[]"
}, {
    "_id": "535e912cc6b93c7b30479454",
        "created_at": "2014-04-25 23:04:36",
        "post_id": "535e912cc6b93c7b30479453",
        "type": "article",
        "article": [{
        "_id": "535e912cc6b93c7b30479454",
            "title": "test article 2",
            "content": "this is my article... 2",
            "created_at": "2014-04-30 22:04:36"
    }],
        "story": "[]"
}];

$scope.jsonFlatten = function () {
    $scope.dates = [];
    $scope.comments.reduce(function (result, item) {
        $scope.dates.push(item.created_at);
    }, 0);
    $scope.dates = _.uniq($scope.dates);
    angular.forEach($scope.dates, function (dateValue, dateKey) {
        var obj = {};
        obj.created_at = dateValue;
        var articleValues = [];
        var storyValues = [];
        angular.forEach($scope.comments, function (value, key) {
            if (dateValue === value.created_at) {
                obj._id = value._id;
                obj.post_id = value.post_id;
                if (value.type === 'story') {
                    angular.forEach(value.story, function (storyValue, storyKey) {
                        storyValues.push(storyValue)
                    });
                } else if (value.type === 'article') {
                    angular.forEach(value.article, function (articleValue, articleKey) {
                        articleValues.push(articleValue)
                    });
                }
            }
        });
        obj.story = storyValues;
        obj.article = articleValues;
        $scope.flattenedResults.push(obj);
    });
};

 $scope.jsonFlatten(); //calling the method jsonFlatten() and making the flatten json

});

I think you misunderstood my question. I am done with time conversion . But now according to this date i need to group data as explained in my question — Anil Sharma, May 05 '14 at 07:30
can you give me your json structure with the complete html structure, i need to see the way in which you put the story data — Nidhish Krishnan, May 05 '14 at 07:36
I have updated my json stucture. It is simple based on post type i switch layout. All i want is to group all post according to their posted dates as i have asked and explained in my question. — Anil Sharma, May 05 '14 at 07:43
sometime there will be multiple articles and story ...am i right — Nidhish Krishnan, May 05 '14 at 07:43
Yes under one date their can be multiple posts i.e article or story . — Anil Sharma, May 05 '14 at 07:45
You are not getting me exactly i don't want any changes to be done on my json . It would be done using directive for group by as suggested in my question comments. I need to group by items. No need to make changes in json. I am getting it from http resource and need to changes this things while showing in view using filter. Check comments to my question , Their answer is exactly i am looking for. — Anil Sharma, May 05 '14 at 08:18
what's the changes i've done in json.........its same what you have given, just i've added one more article and story — Nidhish Krishnan, May 05 '14 at 08:20
No we can't add more story or article in same stance, because we are creating them according to date time and under one datetime their will be only one story and article. So it is clear for every story and article their will be same phenomenon as i have updated json in question. Now with the help of filter i need to group by all posts by their posted dates where date is filtered through datetime as you have mentioned in your answer. — Anil Sharma, May 05 '14 at 08:24
You have posted something like this rright, `Apr-04-14 post1 post2 /all post for that date Apr-01-14 post5 post6` can you give a json related to that — Nidhish Krishnan, May 05 '14 at 09:35
Data is given already. Created at will be filtered for date and then data related to that will come under posts. — Anil Sharma, May 05 '14 at 10:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/52015/discussion-between-nidhishkrishnan-and-creator) — Nidhish Krishnan, May 05 '14 at 10:51
Thanks For your Answer. @NidhishKrishnan . But can we do it with filter or directive. Because it would help us to use anywhere. — Anil Sharma, May 06 '14 at 07:44

Order post By Date inside ng-repeat in View

1 Answers1