Grouping data by date in angularjs

Question

I have my json file as below.

  {
  "components":{
  "record1":
  [
  {
    "date":1419038000,
    "name":"Vinay",
    "status":"false"

  },
  {
    "date":1419034102,
    "name":"Ajay",
    "status":"true"
  }
  ],
  "record2":[
    {
    "date":1619037000,
    "name":"Soumya",
    "status":"true"
  },
  {
    "date":1419038000,
    "name":"Savio",
    "status":"false"
  }
  ]
}
}

This is my js file:

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

app.controller("Control",function($scope,$http){
   $scope.output=[];

   $http.get('myData.json').
       success(function(data){
        $scope.tableData = data.components;
        for(var i in Object.keys($scope.tableData)){

          for(var j in $scope.tableData[Object.keys($scope.tableData)[i]]){

                $scope.output.push($scope.tableData[Object.keys($scope.tableData)[i]][j]);
              }

        }
        console.log($scope.output);
    });
});

I want to group the above data from both array of objects only according to date from the given timestamp into a table. I have attached the link for the image below. enter image description here

When you receive data, map it into nested structure based on dates and pass that new array to view — charlietfl
– charlietfl, Commented Apr 15, 2017 at 16:43
sorry I didn't get you. What nested structure do you actually mean? I have edited my code a little. So please see that — Susanna
– Susanna, Commented Apr 15, 2017 at 17:46

charlietfl · Accepted Answer · 2017-04-15 18:50:55Z

Try something like as follows:

// create object whose keys are dates
// produces {'2012-11-11':{date: DateObj, items:[{name:...},{..}]}, '2014-09-02':{date:....}, ...}
var dateGroupObj =  Object.keys(data.components).reduce(function(a, c){
    data.components[c].forEach(function(item){
      var date=  new Date(item.abc*1000);
      var dateStr = date.toISOString().slice(0,10);
      a[dateStr] = a[dateStr] ? a[dateStr] : {date: new Date(dateStr), items:[]};
      a[dateStr].items.push(item);         
    });
    return a;
  },{});
 // map above object to array to allow sorting, filtering etc 
 $scope.dateGroups = Object.keys(dateGroupObj).map(function(key){
   return dateGroupObj[key];
 });

View

<table>
  <tbody ng-repeat="group in dateGroups | orderBy:'date'">
    <tr ng-repeat="item in group.items">
      <td rowspan="{{group.items.length+1}}" ng-if="$index==0">{{group.date|date}}</td>
      <td>{{item.name}}</td>
      <td>{{item.status}}</td>
    </tr>
  </tbody>
</table>

DEMO

Collectives™ on Stack Overflow

Grouping data by date in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related