0

I have an html page which shows a list of data categorized by each month - here's a sample html page view:

July, 2014:

  • Monday 7th
    • Data 7
    • Data 6
  • Friday 4th
    • Data 5
    • Data 4

May, 2014:

  • Sunday 15th
    • Data 3
  • Thursday 8th
    • Data 2
    • Data 1

...

The json data is in the following format:

data_list = [
  {
    "id": 1, 
    "name": Data1, 
    "date": "2014-05-08", 
  },
  {
    "id": 2, 
    "name": Data2, 
    "date": "2014-05-08", 
  },  
  {
    "id": 3, 
    "name": Data3, 
    "date": "2014-05-15", 
  }, 
  {
    "id": 4, 
    "name": Data4, 
    "date": "2014-07-04", 
  }, 
  {
    "id": 5, 
    "name": Data5, 
    "date": "2014-07-04", 
  }, 
  {
    "id": 6, 
    "name": Data6, 
    "date": "2014-07-07", 
  }, 
  {
    "id": 7, 
    "name": Data7, 
    "date": "2014-07-07", 
  }, 
]

Please help me to implement this in angularjs, thanks in advance.

1
  • You will need to map your data to new structure with months as keys. Commented Jul 10, 2014 at 12:14

1 Answer 1

2

First you create a custom filter for group your input data to required output format. I created a custom filter called groupingFilter

var yourFilter = angular.module('projectFilters', []);

yourFilter.filter("groupingFilter", function () {

    return function (orig, same, getID) {
        if (!(orig instanceof Array)) return orig;
        if (orig.length == 0) return orig;

        var result = [];

        var cur = [];
        var i = 0;
        for (i = 0; i < orig.length; i ++) {
            if (i == 0 || same(orig[i], orig[i-1])) {
                cur.push(orig[i]);
            } else {
                result.push({
                    id: getID(orig[i-1]),
                    items: cur
                });

                cur = [orig[i]];
            }

        }
        result.push({
            id: getID(orig[orig.length - 1]),
            items: cur
        });

        var toKey=function(item){
            return moment(item.logdate).format("YYYY-MM-DD");
          };

        function pushtoexists(itemDateMap,item,date){
            for(var j=0; j<itemDateMap.length; j++){
                if(itemDateMap[j].date == date){
                    itemDateMap[j].logtimes.push(item);
                    return true;
                }
            }
            return false;
        }
        function push_item(itemDateMap,item,date){
            itemDateMap.push({
                'date':date,
                'item':[item]
            });
        }
        var addArrayToMap = function(items){
            var itemDateMap = [];

            for(var i=0; i<items.length; i++){
                var item = items[i]; 
                var date = toKey(item);

                var push_obj = pushtoexists(itemDateMap,item,date);
                if(itemDateMap.length == 0 || push_obj== false){
                    push_item(itemDateMap,item,date);
                }

            }

            return {
                "data_list":itemDateMap,
                };
          };


        for (i = 0; i < result.length; i ++) {
            var map = addArrayToMap(result[i].items);
            result[i].data = map.item_list;
            result[i].$$hashKey = i;

        }

        return result;
    };
});

Add following lines to your controller.

 var data_list = [.. your input data ..]

 $scope.filteredData = $filter("orderBy")(data_list, function (p) {return moment(p.date);}, true);  

 $scope.filteredData = $filter("timelogGroupingFilter")(
        $scope.filteredData, 

        function (p1, p2) {
            return ((moment(p1.logdate).month() == moment(p2.logdate).month()) && (moment(p1.logdate).year() == moment(p2.logdate).year())); 
        },

        function (p) {
            return moment(p.logdate).startOf("month");
        }
    );

data_list is your input data. $scope.filteredData will contain the final sorted data.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.