javascript - 将时间戳分组到星期几并组合数据

Question

我正在创建一个用作热图的表格，显示基于星期几和小时的累积值（在本例中为销售额）。表格的 y 轴是星期几（星期日-星期六），而 x 轴/表格标题是 0-23 小时。

如果有多个天，例如 2018-01-01 和 2018-01-08 都是星期一，则应合并销售数据。此外，在组合这些天后，可能会有重复的时间，在这种情况下，这些值应该组合以显示星期一该时间的累积值（销售额）。

如果重要的话，这个项目在 React 中。

数据将如下所示：

 data2: [
    {
        day: "2018-01-01",
        sales: [{hour: 6, value: 23}, {hour: 9, value: 164}]
    },
    {
        day: "2018-01-02",
        sales: [{hour: 3, value: 223}, {hour: 4, value: 12}]
    },
    {
        day: "2018-01-03",
        sales: [{hour: 7, value: 323}, {hour: 3, value: 86}]
    },
    {
        day: "2018-01-04",
        sales: [{hour: 5, value: 173}, {hour: 21, value: 65}]
    },
    {
      day: "2018-01-05",
      sales: [{hour: 12, value: 193}, {hour: 1, value: 53}]
    },
    {
      day: "2018-01-06",
      sales: [{hour: 15, value: 263}, {hour: 2, value: 56}]
    },
    {
      day: "2018-01-07",
      sales: [{hour: 18, value: 89}, {hour: 8, value: 378}]
    },
    {
      day: "2018-01-08",
      sales: [{hour: 6, value: 76}, {hour: 17, value: 398}]
    }
  ]

我相信我需要从这些数据中创建一个新数组，以便更轻松地创建表。到目前为止，在 componentDidMount() 我使用 moment.js 来获取每个日期的星期几，但我不确定如何最好地组合重复项，然后再组合几个小时。

我考虑过使用 _underscore 但不知道如何使用它。

至今：

 var newDataArr = [];
 for(var i = 0; i < this.state.data2.length; i++){
    var day = moment(this.state.data2[i].day,'YYY-MM-DD').format('ddd');
    console.log(day);
    if(newDataArr).contains(day) {
       // combine?
    } else { 
       // add new day of week
    }
 }

我想要的输出是这样的：

  newData2: [
    {
        day: "Sun",
        sales: [{hour: 6, value: 99}, {hour: 9, value: 164}, {hour: 17, value: 398}]
    },
    {
        day: "Mon",
        sales: [{hour: 3, value: 223}, {hour: 4, value: 12}]
    },
    {
        day: "Tue",
        sales: [{hour: 7, value: 323}, {hour: 3, value: 86}]
    },
    {
        day: "Wed",
        sales: [{hour: 5, value: 173}, {hour: 21, value: 65}]
    },
    {
      day: "Thu",
      sales: [{hour: 12, value: 193}, {hour: 1, value: 53}]
    },
    {
      day: "Fri",
      sales: [{hour: 15, value: 263}, {hour: 2, value: 56}]
    },
    {
      day: "Sat",
      sales: [{hour: 18, value: 89}, {hour: 8, value: 378}]
    }
  ]

标签： javascriptarraysreactjsunderscore.jsmomentjs

Answer 1

以 2 种形式获得结果。我更喜欢第二种形式（不使用数组）。

var data = [
    {
        day: "2018-01-01",
        sales: [{hour: 6, value: 23}, {hour: 9, value: 164}]
    },
    {
        day: "2018-01-02",
        sales: [{hour: 3, value: 223}, {hour: 4, value: 12}]
    },
    {
        day: "2018-01-03",
        sales: [{hour: 7, value: 323}, {hour: 3, value: 86}]
    },
    {
        day: "2018-01-04",
        sales: [{hour: 5, value: 173}, {hour: 21, value: 65}]
    },
    {
      day: "2018-01-05",
      sales: [{hour: 12, value: 193}, {hour: 1, value: 53}]
    },
    {
      day: "2018-01-06",
      sales: [{hour: 15, value: 263}, {hour: 2, value: 56}]
    },
    {
      day: "2018-01-07",
      sales: [{hour: 18, value: 89}, {hour: 8, value: 378}]
    },
    {
      day: "2018-01-08",
      sales: [{hour: 6, value: 76}, {hour: 17, value: 398}]
    }
  ];

console.log("Using Method 1 : ");
var result = [];

data.forEach(function(dataobj){
    var day = moment(dataobj.day).format("ddd");
    var detailsindex = result.findIndex(function(elem){ return elem.day==day;});
    var details = detailsindex>-1 ? result[detailsindex] : {day:day,sales:[]};
    dataobj.sales.forEach(function(salesobj){
        var index = details.sales.findIndex(function(elem){return elem.hour==salesobj.hour});
        var obj = index>-1 ? details.sales[index] : {hour:salesobj.hour,value:0};
        obj.value+=salesobj.value;
        if(index>-1) details.sales[index]=obj;
        else details.sales.push(obj)
    });
    if(detailsindex>-1) result[detailsindex]=details;
    else result.push(details)
});

console.log(result);

<script src="https://momentjs.com/downloads/moment.js"></script>

var data = [
    {
        day: "2018-01-01",
        sales: [{hour: 6, value: 23}, {hour: 9, value: 164}]
    },
    {
        day: "2018-01-02",
        sales: [{hour: 3, value: 223}, {hour: 4, value: 12}]
    },
    {
        day: "2018-01-03",
        sales: [{hour: 7, value: 323}, {hour: 3, value: 86}]
    },
    {
        day: "2018-01-04",
        sales: [{hour: 5, value: 173}, {hour: 21, value: 65}]
    },
    {
      day: "2018-01-05",
      sales: [{hour: 12, value: 193}, {hour: 1, value: 53}]
    },
    {
      day: "2018-01-06",
      sales: [{hour: 15, value: 263}, {hour: 2, value: 56}]
    },
    {
      day: "2018-01-07",
      sales: [{hour: 18, value: 89}, {hour: 8, value: 378}]
    },
    {
      day: "2018-01-08",
      sales: [{hour: 6, value: 76}, {hour: 17, value: 398}]
    }
  ];

console.log("Using Method 2 : ");
var result = {};

data.forEach(function(dataobj){
    var day = moment(dataobj.day).format("ddd");
    result[day] = result[day] || {};
    var details = result[day];
    dataobj.sales.forEach(function(salesobj){
        var count = details[salesobj.hour] || 0;
        details[salesobj.hour]=count+salesobj.value;
    });
});

console.log(result);

<script src="https://momentjs.com/downloads/moment.js"></script>