JSFiddle - React, Tailwind, and code Playground

by Thunder Hemlock

HTML

<div ng-app="myApp">
    <div ng-controller="main">
        <div ng-repeat="g in comments | groupBy:'column' | orderBy:'column'">
            <h2>{{g.column}}</h2>
            <ul>
                <li ng-repeat="comment in g.comments | orderBy:'label'">{{comment.id}}. {{comment.label}}</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

angular.module("myApp", []).
controller("main", ['$scope', function($scope) {
    var createGroupTitle = function() {
        var columns = [];
        return columns[Math.min(Math.floor(Math.random()*4),3)];
    };
 $scope.comments = [
        { id: 1, label: "column1-label1", column: "column1" },
        { id: 5, label: "column1-label2", column: "column1" },
        { id: 2, label: "column2-label1", column: "column2" },
        { id: 3, label: "column2-label2", column: "column2" },
        { id: 4, label: "column3-label1", column: "column3" }
    ];
}]).
filter("groupBy", function() {
    var mArr = null,
        mGroupBy = null,
        mRetArr = null,
        getMemoArr = function(arr, groupBy) {
            var ret = {};
            angular.forEach(arr, function(comment){
                var groupValue = comment[groupBy];
                if(ret[groupValue]) {
                    ret[groupValue].push(comment);
                } else {
                    ret[groupValue] = [comment];
                }
            });
            return ret;
        };
    return function(arr, groupBy) {
        var newMemoArr = getMemoArr(arr, groupBy);
        if(mGroupBy !== groupBy || !angular.equals(mArr, newMemoArr)) {
            console.log("resorting...");
            mArr = newMemoArr;
            mGroupBy = groupBy;
            mRetArr = [];
            var groups = {};
            angular.forEach(arr, function(comment) {
                var groupValue = comment[groupBy]
                if(groups[groupValue]) {
                    groups[groupValue].comments.push(comment);
                } else {
                    groups[groupValue] = {
                        comments: [comment]
                    };
                    groups[groupValue][groupBy] = groupValue;
                    mRetArr.push(groups[groupValue]);
                }
            });
        }
        return mRetArr;
    };
});