Javascript-форум - .map по дате (RE open)

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - .map по дате (RE open) (https://javascript.ru/forum/dom-window/84928-map-po-date-re-open.html)

.map по дате (RE open)

Здесь нужен некий хитроумный алгортим коллеги ) Опишу детали:
Имеем массив данных, в каждом объекте которого есть уникальный Title и дата, но дата за одно и тоже число может поваторяться, уникальный только title

const DATA = [
{
 title: title_1,
 date: 06/02/2023
},
{
 title: title_2,
 date: 06/02/2023
},

{
 title: title_3,
 date: 07/02/2023
},
{
 title: title_4,
 date: 07/02/2023
},

{
 title: title_5,
 date: 08/02/2023
},
{
 title: title_6,
 date: 08/02/2023
},
]

Когда запускаем итерации data.map(item => (
необходимо создавать контейнер(пусть это будет div)
его название будет первая уникальная дата
<div 06/02/2023(item.date)>
и в этом же контейнере нужно создавать снова div и в нем указывать title за эту дату
</div>
Вот что должно получиться:

<div 06/02/2023>
 <div>title_1</div>
 <div>title_2</div>
</div>

<div 07/02/2023>
 <div>title_3</div>
 <div>title_4</div>
</div>

<div 08/02/2023>
 <div>title_5</div>
 <div>title_6</div>
</div>

))

match по конкретной дате не подойдет, т.к. дата будет всегда у первого объекта - 'сегодня' (объектов с датой 'сегодня' может быть несколько подряд) , следующая уникальная дата сегодня + 1 и т.д.

Может как-то нужно сравнивать предедущий item.date с фактическим при итерации ? if(prev.item.date != item.date)

Вероятно нужно использовать .reduce

NeonMan,
объект для хранения дат, и любой for или reduce, но никак не map. примеров на форуме масса, но похоже проще снова написать. кто быстрее?)))

NeonMan,
const DATA напишите нормально хотя бы, с кавычками.

Вы конечно меня извините тов. профессор, но в записи const DATA = [] кавычки не нужны.

NeonMan,
офигеть!!! а давайте так, вы мне кавычки, а я вам div-ы?)))

const DATA = [
{
 title: 'title_1',
 date: '06/02/2023'
},
{
 title: 'title_2',
 date: '06/02/2023'
},
 {
 title: 'title_3',
 date: '07/02/2023'
},
{
 title: 'title_4',
 date: '07/02/2023'
},
{
 title: 'title_5',
 date: '08/02/2023'
},
{
 title: 'title_6',
 date: '08/02/2023'
},
]

Вероятно речь идет о кавычках для string ?

И раз уж в этой теме у нас вопрос о датах, хотел бы уточнить еще один момент, что бы не создавать доп. тему на форме.

Что бы получить дату "завтра", это самый удобный способ или есть еще какие-то альтернативы?

const today = new Date()
let tomorrow =  new Date()
tomorrow.setDate(today.getDate() + 1)

NeonMan,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        [data-date] {
            border: 1px solid red;
        }

        [data-date]:before {
            content: attr(data-date);
            background-color: #F0E68C;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            const DATA = [{
                    title: 'title_1',
                    date: '06/02/2023'
                },
                {
                    title: 'title_2',
                    date: '06/02/2023'
                },
                {
                    title: 'title_3',
                    date: '07/02/2023'
                },
                {
                    title: 'title_4',
                    date: '07/02/2023'
                },
                {
                    title: 'title_5',
                    date: '08/02/2023'
                },
                {
                    title: 'title_6',
                    date: '08/02/2023'
                },
            ];
            const obj = {};
            let div = document.createElement('div');
            let arrHTML = DATA.reduce((arr, {
                title,
                date
            }) => {
                let clone = obj[date];
                if (!clone) {
                    obj[date] = clone = div.cloneNode();
                    arr.push(clone);
                    clone.dataset.date = date
                };
                let child = div.cloneNode();
                child.textContent = title;
                clone.append(child);
                return arr;
            }, []);
            document.body.append(...arrHTML)
        })
    </script>
</head>

<body>
</body>

</html>

Весьма интересная реализация, спасибо.