Angular combining objects into array for filter use

Question

I have an ng-repeat loop returning a list of objects which represent calendar events. I'd like to be able to orderBy date but it looks like first I need to push the returned objects into a single array.

Here is my angular view:

<div class="calendar">

<p>{{cal}}</p>
<div ng-repeat="items in cal">

        <a href="/events/{{items.day}}">
          <article class="eventslist">
           <div class="numberedDate">
               <h3>{{items.day}}</h3>
            </div>
            <div class="calInfo">
            <h5>{{items.title}}</h5>
               <p>{{items}}&nbsp;<a>more</a></p>
            </div>
           </article>


      </div><!-- ng-repeat items -->
</div><!-- calendar -->

items is currently returning:

{"day":"21","title":"ok","summary":"ok","description":"ok","_id":"53ee9f0fc6aed109c6d33cfd"}
{"day":"2","title":"ok","summary":"ok","description":"ok","_id":"53ee9f038782309c6d892"}
{"day":"27","title":"ok","summary":"ok","description":"ok","_id":"533240fc6ae32433chd"}

Is there a way to wrap these returned objects into an array [] so that they could have an orderBy 'day' called on them?

They are currently being pulled out of a parent object and being returned one by one as their own objects. So these objects were originally stored as objects of another object. — byrdr
– byrdr, Commented Aug 19, 2014 at 13:55
items is already an array, ng-repeat would not work otherwise. orderby:day on it should work, but you need to cast the value to Integer to get expected order. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Aug 19, 2014 at 14:03

Caspar Harmer · Accepted Answer · 2014-08-19 15:17:25Z

1

If you just need to get the items into an array, the below loop will do it:

var arr = [];
angular.forEach(items, function (item) {
    arr.push(item);
});

I know your data has a complicated structure, so you may need a couple of loops to pull out the objects you need and flatten the array.

Once your data is structured, Then the code below will work. It will handle an array or an object as long as you get the ng-repeat parameters right. (I've tested it on array):

myApp.filter('orderByDayNumber', function () {
    return function(items, field, reverse) {
        var filtered = [];
        angular.forEach(items, function (item) {
            filtered.push(item);
        });
        filtered.sort(function (a, b) {
            return (parseInt(a[field]) > parseInt(b[field]) ? 1 : -1);
        });
        return filtered;
    };
});

Note the parseInt call in the sort function. I have actually seen a function passed in as a parameter inside the ng-repeat but you can investigate that later if you like.

Anyway, Here is a working demo jsFiddle

edited Aug 19, 2014 at 15:17

answered Aug 19, 2014 at 15:10

Caspar Harmer

8,1372 gold badges46 silver badges41 bronze badges

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

5 Comments

byrdr Over a year ago

Would this be the correct way to use the foreach? var arr = []; angular.forEach($scope.calendar, function (item) { arr.push(item); }); $scope.newitem = arr;

byrdr Over a year ago

I haven't been able to get it working right yet. It's probably due to an error on my part somewhere though.

Caspar Harmer Over a year ago

If you put up a plnkr with the actual data that you are getting, I could have a go at getting it working

byrdr Over a year ago

I've realized I'm closer than I thought with my app setup so far. I am returning the data by rows of objects. I just need to figure out a filter to merge all of the objects into on. example: [{ok}][{ok}][{ok}] to [{ok},{ok},{ok}]

byrdr Over a year ago

here is my latest question. I have a filter, it is just formatted incorrectly...stackoverflow.com/questions/25395711/angularjs-custom-filter

Collectives™ on Stack Overflow

Angular combining objects into array for filter use

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related