Ionic Dynamic List Divider

Question

I have been stumped on this problem for a while now, so I am hoping you can get me in the right direction.

My angular factory returns an object which looks like this

Answer 1

Another solution, using UnderscoreJS, would have you "group" your list by the property you're interested in (here, the year), and then you can iterate over those groups in your template.

Short Version

in your controller:

$scope.groupedPairs = _.chain(list).groupBy('year').pairs().sortBy(0).value();

in your template:

    

        
            {{groupedPair[0]}}
        
        
            {{item.name}}
        
    

---

Long Version

Start by grouping your list by the 'year' property.

var list = [{
    name:"Fall",
    year:"2014"
}, {
    name:"Fall",
    year:"2012"
}, {
    name:"Spring",
    year:"2012"
}, {
    name:"Spring",
    year:"2013"
}, {
    name:"Spring",
    year:"2014"
}, {
    name:"Winter",
    year:"2013"
}];
var grouped = _(list).groupBy('year');

grouped is now:

{
    "2014": [{
        name:"Fall",
        year:"2014"
    }, {
        name:"Spring",
        year:"2014"
    }],
    "2012": [{
        name:"Fall",
        year:"2012"
    }, {
        name:"Spring",
        year:"2012"
    }],
    "2013": [{
        name:"Spring",
        year:"2013"
    }, {
        name:"Winter",
        year:"2013"
    }]
}

But now you want it sorted by the year, so we need two more operations to do that.

First, transform the grouped object into an array of key/value pairs.

var pairs = _(grouped).pairs();

And pairs is now:

[
    [
        "2014",
        [{
            name:"Fall",
            year:"2014"
        }, {
            name:"Spring",
            year:"2014"
        }]
    ],
    [
        "2012",
        [{
            name:"Fall",
            year:"2012"
        }, {
            name:"Spring",
            year:"2012"
        }]
    ],
    [
        "2013",
        [{
            name:"Spring",
            year:"2013"
        }, {
            name:"Winter",
            year:"2013"
        }]
    ]
]

Now we just need to sort by the "key" in each key/value pair. In other words, the [0] property of each pair (which contains the year it was grouped into, e.g. "2013"):

var sortedPairs = _(pairs).sortBy(0);

And sortedPairs is now:

[
    [
        "2012",
        [{
            name:"Fall",
            year:"2012"
        }, {
            name:"Spring",
            year:"2012"
        }]
    ],
    [
        "2013",
        [{
            name:"Spring",
            year:"2013"
        }, {
            name:"Winter",
            year:"2013"
        }]
    ],
    [
        "2014",
        [{
            name:"Fall",
            year:"2014"
        }, {
            name:"Spring",
            year:"2014"
        }]
    ]
]

... which can be easily iterated over in your template. Given $scope.groupedPairs = sortedPairs;:

    

        
            {{groupedPair[0]}}
        
        
            {{item.name}}
        
    

and the full controller code to convert var list to $scope.groupedPairs, without all the explanation:

$scope.groupedPairs = _.chain(list).groupBy('year').pairs().sortBy(0).value();