如何合并数组对象中同日期的数据并按要求展示？

我有一个从数据库获取的数组对象dataObj，想要实现这样的UI展示：把相同日期的条目合并，左侧只显示一次日期，右侧展示该日期下的所有id、month、day信息。但现在写的JS代码运行后会重复显示日期，达不到预期的分组效果。以下是数据示例、预期输出和现有代码，求修正方案：

数据示例 #

dataObj = [
    {
        "id": "1",
        "date": "Tue Nov 07 2023",
        "month": "11",
        "day": "Tuesday",
    },
    {
        "id": "2",
        "date": "Tue Nov 07 2023",
        "month": "11",
        "day": "Tuesday",
    },
    {
        "id": "kGSykTUAd6gcEUmskMu6",
        "date": "Wed Nov 08 2023",
        "month": "11",
        "day": "Wednesday",
    },
]

预期输出 #

Nov 7  

   id:1, month:11, day:Tuesday

   id:2, month:11, day:Tuesday

   Nov 8

   id:kGSykTUAd6gcEUmskMu6, month:11, day:Wednesday

现有代码 #

let datesArr = []

// Pushing the data in the array.
datesArr.push( doc.data().dates )

// Removing same dates from the datesArr
let duplicates = datesArr.filter( function ( item, index, inputArray )
    {
        return inputArray.indexOf( item ) === index
    } )

    duplicates.sort( ( a, b ) =>
    {
        return a - b
    } )

    for ( let dupes of duplicates )
    {
        let myArr = []
        let dupesDate = new Date( dupes ).toDateString()

        for ( let content of dataObj)
        {
            if ( dupesDate === new Date( content.date).toDateString() )
            {
                myArr.push( content );
            }
        }
        
    }

核心思路：先按日期分组数据，再渲染UI #

原代码的问题在于日期收集逻辑错误、排序方式不对，且缺少UI渲染步骤。以下是完整修正方案：

1. 正确分组并排序数据 #

先把dataObj转换成按日期分组的结构，同时对日期进行排序：

// 按日期分组数据，键为统一格式的日期字符串，值为对应条目数组
const groupedData = {};
dataObj.forEach(item => {
    // 统一日期格式（避免不同格式的同日期被当成不同键）
    const dateKey = new Date(item.date).toDateString();
    if (!groupedData[dateKey]) {
        groupedData[dateKey] = [];
    }
    groupedData[dateKey].push(item);
});

// 对日期进行升序排序
const sortedDates = Object.keys(groupedData).sort((dateA, dateB) => {
    return new Date(dateA) - new Date(dateB);
});

2. 渲染分组后的UI #

根据分组好的数据生成页面元素（示例用原生JS，你可以根据自己的框架调整）：

// 假设页面上有个容器元素用来展示结果
const resultContainer = document.getElementById('result-container');

sortedDates.forEach(dateStr => {
    // 创建日期标题
    const dateTitle = document.createElement('div');
    // 把日期格式化为"Nov 7"的形式
    const dateObj = new Date(dateStr);
    const shortMonth = dateObj.toLocaleString('en-US', { month: 'short' });
    const dayNum = dateObj.getDate();
    dateTitle.textContent = `   ${shortMonth} ${dayNum}`;
    resultContainer.appendChild(dateTitle);

    // 遍历该日期下的所有条目
    groupedData[dateStr].forEach(item => {
        const itemEl = document.createElement('div');
        itemEl.textContent = `   id:${item.id}, month:${item.month}, day:${item.day}`;
        resultContainer.appendChild(itemEl);
    });
});

原代码问题说明 #

• 日期收集错误：datesArr.push(doc.data().dates)只添加了单个日期，没有遍历dataObj收集所有日期，导致后续分组逻辑完全失效。
• 排序逻辑错误：用a - b直接比较日期字符串，这在JS里会得到NaN，根本无法正确排序。
• 缺少UI渲染：分组后的myArr没有被用来生成页面元素，自然看不到预期效果。

内容的提问来源于stack exchange，提问作者alittlecurryhot