Как грамотно сгруппировать компоненты с одинаковой датой?

Question

[AndreiSiwaa]

Есть 2 компоненты:

<Operations>
    <OperationsItem>

Сейчас базовый функционал (через v-for перебираю массив объектов и передаю в OperationsItem). У компоненты OperationsItem есть шапка (там где дата) и тело(название и сумма операции). Нужно сделать так, чтобы объекты с одной датой не дублировали дату. Визуально были бы сгруппированы и находились под одной шапкой

Comments

[Вадим]

исходный массив объектов придумать, или дадите свой?

[AndreiSiwaa]

Вадим,

[
    {
      "id": 8,
      "name": "Опер3",
      "value": 88,
      "date": "2021-01-22"
    },
    {
      "id": 5,
      "name": "Опер2",
      "value": 452,
      "date": "2021-01-12"
    }]

Answer 1

[Вадим]

var source = [
    {
      "id": 8,
      "name": "Опер3",
      "value": 88,
      "date": "2021-01-22"
    },
    {
      "id": 5,
      "name": "Опер2",
      "value": 452,
      "date": "2021-01-12"
    },
    {
      "id": 50,
      "name": "Опер20",
      "value": 4523,
      "date": "2021-01-22"
    }
]

var groupByDate = {};
source.forEach(function(item){
  if(groupByDate[item.date]){
    groupByDate[item.date].push(item)
  } else {
    groupByDate[item.date] = [item]
  }
})

В итоге получаем объект, свойства которого - даты, а значения - массивы элементов этих дат.
Ну и далее перебираем любым удобным образом объект и выводим в DOM.

Comments

[AndreiSiwaa]

Благодарю