Group items by month and display them in a two nested lists in Angular.js

Question

I have a list of items. Each item contains a date property. I want to group all items by month and display them in two nested lists.

Example

June 2015
- Item 1
- Item 2
- Item 3
May 2015
- Item 4
- Item 5
- Item 6

etc.

Is it possible to achieve this in Angular.js without fiddling with underlying data (i.e. via filters and such)?

I've tried the method described in this topic: How can I group data with an Angular filter?, but it breaks the order of the elements and I have to manually format date to 'MMMM YYYY' before calling groupBy.

It could be that your date property is in string format. Convert it into date first. To avoid duplicating, see this solution. Hope it will be helpfull for you. — arman1991
– arman1991, Commented Jun 15, 2015 at 12:51
Thank you @arman1991 for a response. My date is initially a moment() instance. I couldn't find a way to group items by month and year without first adding another property to hold textual representation of 'MMMM YYYY'. Is there a way to use groupby with moment() or Date instance directly? — Slava Fomin II
– Slava Fomin II, Commented Jun 15, 2015 at 20:58
Maybe this topic can help you, the moment.js is also mentioned. I find a way to group with date as described in my previous comment, but for some strange reason, the filtering doesn't work in format that you want... You will be informed if I discover a way without adding the new property :) — arman1991
– arman1991, Commented Jun 16, 2015 at 22:04
There is also a problem to combine grouping and ordering with date parameter... — arman1991
– arman1991, Commented Jun 17, 2015 at 0:25
Thank you @arman1991 for taking a time to look into this. I've decided to re-structure the data inside of my controller for now to use simpler rendering functionality. — Slava Fomin II
– Slava Fomin II, Commented Jun 17, 2015 at 12:25

Nishant · Accepted Answer · 2015-09-12 21:19:44Z

0

Looks pretty straight forward, just group the items by date and display :

var itemsGroupedByMonth = function (items) {
    var
        groups = [[], [], [], [], [], [], [], [], [], [], [], [],],
        itemGroupedByMonths = [];

    for (var i = 0; i < items.length; i++) {
      groups[items[i].date.getMonth()].push(items[i]);
    }
    for (var i = 0; i < groups.length; i++) {
      if (groups[i].length) {
        itemGroupedByMonths.push({
          month: monthLabels[i],
          items: groups[i]
        });

      }
    }
    return itemGroupedByMonths;
  };

Find a working example here : http://plnkr.co/edit/idvloFKoFvWGdBSGfMsX?p=preview

answered Sep 12, 2015 at 21:19

Nishant

5,1692 gold badges30 silver badges44 bronze badges

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

2 Comments

Maarten Heideman Over a year ago

How to do this with angular 2?

Nishant Over a year ago

The solution is based on pure JS, i.e. does not use any angular component. You need to rewrite same logic in TypeScript.

Collectives™ on Stack Overflow

Group items by month and display them in a two nested lists in Angular.js

Example

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Example

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related