Angular中按section_name分组对象数组并实现HTML条件渲染

步骤1：数据分组处理 #

先用JavaScript把assets数组按section_name字段分组，生成键为区块名称、值为对应资产列表的对象：

const lectureData = {
    "_id": "63346a5c8f7787337d09dd29",
    "chapter": "6333119248004d54023a4747",
    "title": "  sorting in math ",
    "sort_order": 1,
    "is_published": true,
    "__v": 0,
    "assets": [
        {
        "_id": "63397cd1aca771c40858262c",
        "lecture": "63346a5c8f7787337d09dd29",
        "description": "download the powerpoint slides",
        "section_name": "lecture_explenation",
        "file_type": "ppt",
        "file_name": "http://127.0.0.1:3000/public/uploads/assets/Kate-·-SlidesCarnival.pptx-1664711889777.pptx",
        "__v": 0
        },
        {
        "_id": "63397d70aca771c40858263a",
        "lecture": "63346a5c8f7787337d09dd29",
        "description": "download zip file   ",
        "section_name": "lecture_explenation",
        "file_type": "zip",
        "file_name": "http://127.0.0.1:3000/public/uploads/assets/p.zip-1664712048665.zip",
        "__v": 0
        },
        {
            "_id": "63397cd1aca771c40858262c",
            "lecture": "63346a5c8f7787337d09dd29",
            "section_name": "lecture_exercise",
            "file_type": "docs",
            "file_name": "http://127.0.0.1:3000/public/uploads/assets/Kate-·-SlidesCarnival.pptx-1664711889777.pptx",
        
            "__v": 0
            }
    ]
};

// 按section_name分组
function groupAssetsBySection(assets) {
    return assets.reduce((groups, asset) => {
        const section = asset.section_name;
        groups[section] = groups[section] || [];
        groups[section].push(asset);
        return groups;
    }, {});
}

const groupedAssets = groupAssetsBySection(lectureData.assets);

步骤2：HTML动态渲染 #

创建容器并编写渲染逻辑，仅当分组的资产列表长度大于0时才渲染对应的区块：

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

<script>
// 这里放入上面的lectureData、groupAssetsBySection函数和groupedAssets变量

function renderGroupedAssets(groupedAssets) {
    const container = document.getElementById('assets-container');
    container.innerHTML = '';

    // 遍历每个分组
    Object.entries(groupedAssets).forEach(([sectionName, assets]) => {
        // 跳过空分组
        if (assets.length === 0) return;

        // 创建分组标题（映射英文到中文）
        const titleMap = {
            'lecture_explenation': '讲解资料',
            'lecture_exercise': '练习资料'
        };
        const sectionTitle = document.createElement('h3');
        sectionTitle.textContent = titleMap[sectionName] || sectionName;
        container.appendChild(sectionTitle);

        // 创建资产列表
        const assetList = document.createElement('ul');
        assets.forEach(asset => {
            const listItem = document.createElement('li');
            // 拼接下载链接、描述和文件类型
            const fileName = asset.file_name.split('/').pop();
            let itemHtml = `<a href="${asset.file_name}" target="_blank">${fileName}</a>`;
            if (asset.description) {
                itemHtml += ` - ${asset.description.trim()}`;
            }
            itemHtml += ` (${asset.file_type})`;
            listItem.innerHTML = itemHtml;
            assetList.appendChild(listItem);
        });
        container.appendChild(assetList);
    });
}

// 执行渲染
renderGroupedAssets(groupedAssets);
</script>

说明 #

• 分组逻辑使用reduce方法高效聚合数据，确保同一section_name的资产被归类到同一数组；
• 渲染时通过Object.entries遍历分组对象，跳过长度为0的分组，避免空区块出现；
• 通过titleMap将英文区块名转换为中文，提升可读性；
• 每个资产项生成可点击的下载链接，显示文件名、描述（如果有）和文件类型。

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