与AngularJS创建统计出数组 [英] Creating stats out of array with AngularJS

查看:251
本文介绍了与AngularJS创建统计出数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这样看对象的数组:

I have an array of objects looking like this:

[
  {
    "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"
  }
]

我所试图做的是能够提供统计出的数据的阵列。事情是这样的:

What I am trying to do is to be able to provide stats out of the array of data. Something like this:

数组中的每个对象都是一趟,车是汽车:code和时间的道路上是一切的总和时间:12:34:56(这是一个momentJS对象)。

Every object of the array is a trip, car is "car:code" and Time on the road is the sum of all "duration:"12:34:56" (being this a momentJS object).

到目前为止,我已经能够创建一个对象使用下列code,列出了所有独特的月:

So far I've been able to create an object that lists all unique months using the following code:

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;

问题是,我认为,要实现什么,我需要我不得不从每月阵列中提取独特的赛车和车手名单,并将它推回。

The problem is that I think that to accomplish what I need I have to extract the list of unique cars and drivers from every month array and push it back in.

这就是我想我可能需要的结构:

That's the structure I think I might need:

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

因此​​,基本上,使每个唯一的一个月的对象,然后每个月,为每个独特的汽车,并为每个独特驱动阵列之一。

So basically, make an object for every unique month, and then for each month, make an array for each unique car and one for each unique driver.

这是如何到达那里的任何提示吗?我担心这对我来说有点太超前了现在。

Any tips on how to get there? I'm fearing that this is a bit too advanced for me right now.

推荐答案

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

If you use lodash it's easier. This would be a way of doing it:

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

这篇关于与AngularJS创建统计出数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆