@AndreiSiwaa

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

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

<Operations>
    <OperationsItem>


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

600afe8fee441222487878.png
  • Вопрос задан
  • 47 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy
Верставший фронтендер
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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
06 мар. 2021, в 02:23
120000 руб./за проект
06 мар. 2021, в 00:29
500 руб./за проект
05 мар. 2021, в 23:28
1200 руб./за проект