AngularJS Retrieve JSON Records Based On Date

Question

I have only used ng-repeat to retrieve results in AngularJS so far however I am left with a little bit more of a complex HTML structure this time.

Here is an example of my HTML:

<section ng-controller="LandingController as vm">
  <div class="container-fluid">
    <div class="row" id="blog-headliner">
      <div class="col-md-6 col-sm-12 blog-headline-item">
        ///// JSON object with the earliest update date and has a featured value of 1
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass1 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass1 = ''">
        ///// JSON object with the 2nd earliest update date and has a featured value of 1
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass2 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass2 = ''">
        ///// JSON object with the 3rd earliest update date and has a featured value of 1
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass3 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass3 = ''">
        ///// JSON object with the 4th earliest update date and has a featured value of 1
      </div>
    </div>
  </div>
</section>

As you can see the blog-headline-item elements are different so using ng-repeat will be no good for me in this case.

I then have this JSON data:

[
  {
    "id": 3,
    "author_id": 1,
    "title": "Hello I am featured",
    "subtitle": "Yeahaaaa!",
    "content": "<p>Content<\/p>\r\n",
    "featured_image": "1513fefbb4c4ced364ca7b976e1b3b68bed9c7c3.jpg",
    "slug": "hello-i-am-featured-2",
    "published": 1,
    "featured": 1,
    "created_at": "2016-03-31 12:35:02",
    "updated_at": "2016-03-31 12:44:44",
    "published_at": "2016-03-31 12:35:06"
  },
  {
    "id": 4,
    "author_id": 1,
    "title": "Article",
    "subtitle": "This is an article",
    "content": "<p>This is an article about an article.<\/p>\r\n",
    "featured_image": "cf6b8210c93ad19a3b71922f36a96229abdc148a.jpg",
    "slug": "article",
    "published": 1,
    "featured": 0,
    "created_at": "2016-03-31 13:52:24",
    "updated_at": "2016-03-31 13:52:29",
    "published_at": "2016-03-31 13:52:29"
  }
]

NOTE: there are more records than this at the api url I just wanted to show an example.

So down to what I'd like to achieve... I want to pull through 4 records to the front end that have an object with a featured value of 1 and display them based on the updated_at time, the 4 closest to today's date should show. If you look at the HTML structure you will see that the elements with the class of blog-headline-item have a comment with the requirements for each one in them.

As I am unable to use ng-repeat I am unsure how else I can do this, any ideas would be much appreciated.

Can you use $scope.data = $filter('orderBy')(array, 'updated_at', true) in the controller and then you can use slice to get just the first 4 items and then either use the ng-repeat or just reference the objects in the array using ng-model="data[0]" 0-3 in each of the <div>'s — Michael
– Michael, Commented Mar 31, 2016 at 14:28

Renan Ferreira · Accepted Answer · 2016-03-31 15:06:56Z

1

You can use lodash to help you to achieve that, for instance:

var dates = _([{date: new Date()}, {date: new Date(0)}]).orderBy('date', 'desc').value().splice(0,4)

It will return the date sorted by the newest and only 4 items

edited Mar 31, 2016 at 15:06

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

answered Mar 31, 2016 at 14:37

Eduardo Pereira

8801 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Renan Ferreira · Accepted Answer · 2016-03-31 14:36:41Z

I really like to use lodash for manipulating my data collections. So, using it, I would do:

working example: https://jsfiddle.net/relferreira/d0c0xmmx/2/

But you can really do using the $filter service, or a simple foreach.

HTML:

<div data-ng-app="app">

  <section ng-controller="MainController as mainVm">
  <div class="container-fluid">
    <div class="row" id="blog-headliner">
      <div class="col-md-6 col-sm-12 blog-headline-item">
        ///// JSON object with the earliest update date and has a featured value of 1
        {{mainVm.filterData[0]}}
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass1 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass1 = ''">
        ///// JSON object with the 2nd earliest update date and has a featured value of 1
        {{mainVm.filterData[1]}}
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass2 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass2 = ''">
        ///// JSON object with the 3rd earliest update date and has a featured value of 1
        {{mainVm.filterData[2]}}
      </div>
      <div class="col-md-3 col-sm-4 blog-headline-item" ng-mouseenter="blogHeadlinePClass3 = 'blog-headline-p-reveal'" ng-mouseleave="blogHeadlinePClass3 = ''">
        ///// JSON object with the 4th earliest update date and has a featured value of 1
        {{mainVm.filterData[3]}}
      </div>
    </div>
  </div>
</section>

</div>

JS:

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;

    vm.data = [ ... ];

    vm.filterData = _.chain(vm.data)
                    .orderBy('updated_at', ['desc'])
                    .filter(function(e) { return e.featured == 1})
                    .value();


}

Collectives™ on Stack Overflow

AngularJS Retrieve JSON Records Based On Date

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related