Angular JS grouping objects

Question

I have the following array of objects:

$scope.monthTasks = [object,object,...,object];

Each object is as follows:

Object={
"emp_id": 1,
"task_id":212,
"project_id":2,
"task_name":"Updating UI",
"tasks": [
            {
             "task_date": "2016-9-14",
             "hours": 2,
             "minutes": 15
            }
        ]
    };
}

I have multiple such objects with the with different task_date. I want to group these objects by date as several tasks can have same the date. How can I achieve this?

Do you want to show them together in the HTMLß

HermanTheGermanHesse
– HermanTheGermanHesse

2016-10-21 06:19:07 +00:00
Commented Oct 21, 2016 at 6:19 — HermanTheGermanHesse
– HermanTheGermanHesse, Commented Oct 21, 2016 at 6:19

HermanTheGermanHesse · Accepted Answer · 2016-10-21 06:19:03Z

3

Use filter a for it. The orderBy filter is available for it. You can use it like this orderBy : task_date. Like here:

 {{ [{
    'name': 'Ari',
    'status': 'awake'
    }, {
    'name': 'Q',
    'status': 'sleeping'
    }, {
    'name': 'Nate',
    'status': 'awake'
 }] | orderBy: 'name' }}

<!--
    [
    {"name":"Ari","status":"awake"},
    {"name":"Nate","status":"awake"},
    {"name":"Q","status":"sleeping"}
    ]
-->

edited Oct 21, 2016 at 6:19

HermanTheGermanHesse

5819 silver badges26 bronze badges

answered Oct 21, 2016 at 5:38

Jigar7521

1,5791 gold badge14 silver badges29 bronze badges

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

Comments

Kei · Accepted Answer · 2016-10-21 07:24:07Z

This is not such an easy way, but I would create dictionary whose key is task_date.
I assume that each object could have multiple tasks, which makes the problem more complex.
So my solution would be as follows:

http://codepen.io/kei-sato/pen/qaLRLZ

js:

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', function($scope){
  var monthTasks = [
    { id: 1, tasks: [{ task_date: '2016-9-13' }, { task_date: '2016-9-14' }] },
    { id: 2, tasks: [{ task_date: '2016-9-12' }] },
    { id: 3, tasks: [{ task_date: '2016-9-11' }, { task_date: '2016-9-14' }] },
    { id: 4, tasks: [{ task_date: '2016-9-10' }] },
  ];

  var monthTasksDict = monthTasks.reduce((dict, monthTask) => {
    monthTask.tasks.forEach(task => {
      var taskDate = task.task_date;
      dict[taskDate] = dict[taskDate] || [];
      dict[taskDate].push(monthTask);
    });
    return dict;
  }, {});

  var monthTasksWithTaskDate = Object.keys(monthTasksDict).map(taskDate => ({ task_date: taskDate, monthTasks: monthTasksDict[taskDate] }));
  $scope.monthTasksWithTaskDate = monthTasksWithTaskDate;

}]);

html:

<html lang="en" ng-app="myApp">
  <body ng-controller="myCtrl">
    <ul ng-repeat="monthTasks in monthTasksWithTaskDate | orderBy: 'task_date'">
      task_date: {{ task_date }}
      <li ng-repeat="monthTask in monthTasks">
        id: {{ monthTask.id }}
      </li>
    </ul>

    <!-- External Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  </body>
</html>

Nishant123 · Accepted Answer · 2016-10-21 07:58:48Z

You can use functions to filter your results

<div ng-repeat="task in tasksToFilter() | filter:filterTask">
        <b>{{task['tasks'][0]['task_date']}}</b>
        <li ng-repeat="mytask in result(task)">{{mytask.task_name}}</li>        
  </div>

Functions

$scope.tasksToFilter = function() {
        CachedTasks = [];
        return $scope.json;
    }

    $scope.filterTask = function(task) {

        var newTask = CachedTasks.indexOf(task["tasks"][0]["task_date"]) == -1;
        if (newTask) {
            CachedTasks.push(task["tasks"][0]["task_date"]);
            console.log(CachedTasks);
        }
        return newTask;
    }

    $scope.result = function(currenttask)
    {
        var groupvalues = [];
      for(var i=0;i<$scope.json.length;i++)
      {
        if($scope.json[i]['tasks'][0]['task_date'] == currenttask['tasks'][0]['task_date'])
        {
            groupvalues.push($scope.json[i]);
        }
      }
      return groupvalues;
    }

FULL EXAMPLE

Collectives™ on Stack Overflow

Angular JS grouping objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related