使用AngularJS从数组中创建统计数据

时间:2014-11-22 15:01:03

标签: javascript arrays angularjs

我有一个像这样的对象数组:

[
  {
    "date":"20/11/2014",
    "time":"17.54.39",
    "car":"369",
    "driver":"Jenny",
    "from":"Luna House",
    "destination":"James Hotel",
    "pax":"3",
    "comment":"",
    "commenttime":"",
    "arrival":"17.54.45",
    "inserted":true,
    "cancelled":"",
    "duration":"00:00:06"
  },
  {
    "date":"23/11/2014",
    "time":"10.54.39",
    "car":"210",
    "driver":"David",
    "from":"Office",
    "destination":"Airport",
    "pax":"3",
    "comment":"",
    "commenttime":"",
    "arrival":"11.01.45",
    "inserted":true,
    "cancelled":"",
    "duration":"00:07:06"
  }
]

我要做的是能够从数据数组中提供统计数据。像这样:

enter image description here

阵列的每个对象都是旅行,汽车是"汽车:代码"在路上的时间是所有"持续时间的总和:" 12:34:56" (这是一个时刻的JS对象)。

到目前为止,我已经能够使用以下代码创建一个列出所有唯一月份的对象:

var monthDict = {};

angular.forEach($scope.recordlist, function(record) {
  var month = moment(record.date, 'DD-MM-YYYY').format('MMMM YYYY');
  monthDict[month] = monthDict[month] || [];
  monthDict[month].push(record);
});

for (record in monthDict) {     
    var month = record;        
    for (item in monthDict[record]) {
        monthDict[record][item]['month'] = month;        
    }
};

$scope.monthlist = monthDict;

enter image description here

问题是,我认为要完成我需要的工作,我必须从每个月的数组中提取独特的汽车和驱动程序列表并将其推回。

我认为我可能需要的结构:

November: {
    Trips: [
        Object 1 {}
        Object 2 {}
    ]
    Cars: [
        369 [
            Object 1 {}
        ] 
        210 [
            Object 1 {}
        ] 
    ]
    Drivers: [
        Jenny [
            Object 1 {}
            Object 2 {}
        ],
        Mango [
            Object 1 {}
            Object 2 {}
        ]
    ]
}

所以基本上,为每个唯一的月份制作一个对象,然后为每个月制作一个每个独特汽车的阵列,并为每个独特的汽车制作一个阵列。

有关如何到达那里的任何提示?我现在担心这对我来说有点太先进了。

1 个答案:

答案 0 :(得分:1)

如果您使用lodash则更容易。这将是一种方式:

HTML:

  <body ng-app="myApp">
    <h1>Hello AngularJS!</h1>
    <div ng-controller="myCtrl">
      {{hello}}
      <pre>{{data | json}}</pre>
      <pre>{{data2 | json}}</pre>

      <div ng-repeat="(monthName, monthValue) in data2">
        <p class="month-header">{{monthName}}</p>
        <table ng-repeat="(groupName, groupValue) in monthValue">
          <tr>
            <th>{{groupName}}</th>
            <th>Trips</th>
            <th>Duration</th>
          </tr>
          <tr ng-repeat="(tripName, tripValue) in groupValue">
            <td>{{tripName}}</td>
            <td>{{tripValue.trips}}</td>
            <td>{{tripValue.duration}}</td>
          </tr>
        </table>
      </div>
    </div>
  </body>

JS:

  var dataByMonth = _.groupBy($scope.data, function(record) { return moment(record.date, 'DD-MM-YYYY').format('MMMM YYYY'); });
  console.log(dataByMonth);
  dataByMonth = _.mapValues(dataByMonth, function(month) {
   var obj = {};
   obj.Cars = _.groupBy(month, 'car');
   obj.Drivers = _.groupBy(month, 'driver');

   _.each(obj, function(groupsValue, groupKey) {
      obj[groupKey] = _.mapValues(groupsValue, function(groupValue) {
         return _.reduce(groupValue, function(sum, trip) {
           sum['trips']++;
         //addDuration(sum.duration, car.duration); 
         return sum;
         }, {trips: 0, duration: ''})
       });
   })

   return obj;
  });
 console.log(dataByMonth);

plunker