求助：按年份分组对象并在HTML中按指定格式展示的实现方法

问题背景 #

我有3个对象数据如下：

[
    {u'criados': u'25/10/2022 00:50', u'arquivo': u'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/9.pdf', u'id': 1, u'tipo': u'NAI', u'slug': u'Teste-1'},
    {u'criados': u'25/10/2022 23:54', u'arquivo': u'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/Profile.pdf', u'id': 2, u'tipo': u'NIP', u'slug': u'copa-06'},
    {u'criados' : u'16/5/2020 21:25', u'arquivo': u'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/test.pdf', u'id' : 3, u'tipo': u'NIP', u'slug': u'test-02'}
]

需要在HTML中按创建年份分组展示，目标格式如下：

2022
 - Object 1
 - Object 2

2020
 - Object 3

方案一：后端Python分组后渲染HTML #

先在后端完成数据分组，再生成对应HTML结构，适合服务端渲染场景：

# 原始数据
data = [
    {'criados': '25/10/2022 00:50', 'arquivo': 'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/9.pdf', 'id': 1, 'tipo': 'NAI', 'slug': 'Teste-1'},
    {'criados': '25/10/2022 23:54', 'arquivo': 'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/Profile.pdf', 'id': 2, 'tipo': 'NIP', 'slug': 'copa-06'},
    {'criados' : '16/5/2020 21:25', 'arquivo': 'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/test.pdf', 'id' : 3, 'tipo': 'NIP', 'slug': 'test-02'}
]

# 按年份分组
year_groups = {}
for item in data:
    # 从criados字段提取年份（格式为DD/MM/YYYY HH:MM，分割后取对应部分）
    year = item['criados'].split('/')[2].split(' ')[0]
    if year not in year_groups:
        year_groups[year] = []
    year_groups[year].append(item)

# 按年份倒序排序（可选，让最新年份在前）
sorted_years = sorted(year_groups.keys(), reverse=True)

# 生成HTML字符串
html_output = ""
for year in sorted_years:
    html_output += f"<h3>{year}</h3>\n<ul>\n"
    for obj in year_groups[year]:
        html_output += f"    <li>Object {obj['id']}</li>\n"
    html_output += "</ul>\n<br>\n"

# 输出或嵌入页面
print(html_output)

方案二：前端JavaScript处理并渲染 #

如果数据是通过接口获取到前端，可直接用JS完成分组和渲染：

<div id="object-container"></div>

<script>
// 假设从接口获取的原始数据
const data = [
    {'criados': '25/10/2022 00:50', 'arquivo': 'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/9.pdf', 'id': 1, 'tipo': 'NAI', 'slug': 'Teste-1'},
    {'criados': '25/10/2022 23:54', 'arquivo': 'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/Profile.pdf', 'id': 2, 'tipo': 'NIP', 'slug': 'copa-06'},
    {'criados' : '16/5/2020 21:25', 'arquivo': 'http://hml.static.detran.al.gov.br/media/infracoes/notificacoes/test.pdf', 'id' : 3, 'tipo': 'NIP', 'slug': 'test-02'}
];

// 按年份分组
const yearGroups = {};
data.forEach(item => {
    const year = item.criados.split('/')[2].split(' ')[0];
    if (!yearGroups[year]) {
        yearGroups[year] = [];
    }
    yearGroups[year].push(item);
});

// 按年份倒序排序
const sortedYears = Object.keys(yearGroups).sort((a, b) => b - a);

// 获取页面容器
const container = document.getElementById('object-container');

// 渲染内容到页面
sortedYears.forEach(year => {
    // 创建年份标题
    const yearHeader = document.createElement('h3');
    yearHeader.textContent = year;
    container.appendChild(yearHeader);

    // 创建对象列表
    const list = document.createElement('ul');
    yearGroups[year].forEach(obj => {
        const listItem = document.createElement('li');
        listItem.textContent = `Object ${obj.id}`;
        list.appendChild(listItem);
    });
    container.appendChild(list);

    // 添加换行间隔
    container.appendChild(document.createElement('br'));
});
</script>

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