如何在JS地图功能中分组

Question

我有一些来自DB的数据：

{InteractionDate: '2022-07-07', Time: 10, ID: 'eac61b7e-8e25-4445-ad1d-f1ee8c6ac86c'}
{InteractionDate: '2022-07-07', Time: 20, ID: 'c3a78dbe-553d-4ecc-b4ef-8d8d3039c521'}
{InteractionDate: '2022-07-07', Time: 33, ID: 'c3a78dbe-553d-4ecc-b4ef-8d8d3039c521'}
{InteractionDate: '2022-07-07', Time: 30, ID: '229530ed-ca44-4015-b1d7-b528be5b6071'}

我需要在UI中显示它：

Month   Time    # of Unique ID's
=====   ====    ================
07/22   93      3

ID是我需要一些帮助的新增加。现在，我正在使用它来分组所有日期并总结时间。

        const groupedArray = _(allInteractions)
        .groupBy(v => moment(v.InteractionDate).format('MM/YYYY'))
        .map((item, date) => ({
            interactionDate: date,
            totalSec: _.sumBy(item, 'Time')
            //uniqueIDs:    ?
        }))
        .value();

问题是 - 我怎么知道07/22中看到了多少个不同的ID？

Answer 1

我的解决方案不是那么漂亮，但是它正在起作用

var allInteractions = get_data();
const groupedArray = _(allInteractions)
  .groupBy(v => moment(v.InteractionDate).format('MM/YYYY'))
  .map(function(item, date) {
    var obj = {}
    item.forEach(function(item) {
      obj[item.ID] = true
    });
    return {
      interactionDate: date,
      totalSec: _.sumBy(item, 'Time'),
      uniqueIDs: Object.keys(obj).length
    }
  })
  .value();

console.log(groupedArray)

function get_data() {
  return [{
      InteractionDate: '2022-07-07',
      Time: 10,
      ID: 'eac61b7e-8e25-4445-ad1d-f1ee8c6ac86c'
    },
    {
      InteractionDate: '2022-07-07',
      Time: 20,
      ID: 'c3a78dbe-553d-4ecc-b4ef-8d8d3039c521'
    },
    {
      InteractionDate: '2022-07-07',
      Time: 33,
      ID: 'c3a78dbe-553d-4ecc-b4ef-8d8d3039c521'
    },
    {
      InteractionDate: '2022-07-07',
      Time: 30,
      ID: '229530ed-ca44-4015-b1d7-b528be5b6071'
    },
    {
      InteractionDate: '2022-05-05',
      Time: 30,
      ID: '229530ed-ca44-4015-b1d7-b528be5b6071'
    }
  ];

}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Answer 2

这是使用内置set运算符进行的香草JS方法。

const data = [{InteractionDate: '2022-07-07', Time: 10, ID: 'eac61b7e-8e25-4445-ad1d-f1ee8c6ac86c'},
{InteractionDate: '2022-07-07', Time: 20, ID: 'c3a78dbe-553d-4ecc-b4ef-8d8d3039c521'},
{InteractionDate: '2022-07-07', Time: 33, ID: 'c3a78dbe-553d-4ecc-b4ef-8d8d3039c521'},
{InteractionDate: '2022-07-07', Time: 30, ID: '229530ed-ca44-4015-b1d7-b528be5b6071'}]

const result = data.reduce((acc, el) => {
  if (!acc[el.InteractionDate]) {
    acc[el.InteractionDate] = { time: 0, ids: new Set() }
  }
  acc[el.InteractionDate].time += el.Time;
  acc[el.InteractionDate].ids.add(el.ID);
  return acc;
}, {});

Object.entries(result).forEach(([date, { time, ids }]) => {
  console.log({date, time, ids: ids.size });
})