Angular中如何仅在布尔条件为false时遍历对象数组并渲染表格

需求说明 #

遍历第一个JSON中所有done值为"No"（对应业务逻辑中的布尔值false）的条目，将第二个JSON中对应字段的匹配数据以表格形式展示，仅保留done为"No"的项。

第一个JSON示例（审计数据） #

{
    "gmbAuditData": [{
        "gmbtitle": [{
                "id": 1,
                "done": "Yes"
            },
            {
                "id": 2,
                "done": "Yes"
            },
            {
                "id": 3,
                "done": "Yes"
            }
        ],
        "gmbcategory": [{
                "id": 1,
                "done": "Yes"
            },
            {
                "id": 2,
                "done": "No"
            },
            {
                "id": 3,
                "done": "No"
            },
            {
                "id": 4,
                "done": "No"
            }
        ]
    }]
}

实现步骤（以JavaScript为例） #

• 1. 解析两个JSON文件，转换为可操作的对象。
• 2. 遍历第一个JSON的gmbAuditData下的所有数组（如gmbtitle、gmbcategory）。
• 3. 筛选出每个数组中done值为"No"的条目，记录其id和所属字段名。
• 4. 匹配第二个JSON中对应字段、对应id的数据。
• 5. 将匹配到的数据整理为表格格式输出。

示例代码 #

假设第二个JSON数据结构如下（示例）：

{
    "gmbDetailData": [{
        "gmbtitle": [{
                "id": 1,
                "content": "商家标题1"
            },
            {
                "id": 2,
                "content": "商家标题2"
            }
        ],
        "gmbcategory": [{
                "id": 2,
                "content": "餐饮服务"
            },
            {
                "id": 3,
                "content": "外卖配送"
            },
            {
                "id": 4,
                "content": "到店自提"
            }
        ]
    }]
}

处理代码：

// 解析两个JSON
const auditJson = JSON.parse(auditJsonStr);
const detailJson = JSON.parse(detailJsonStr);

// 存储需要展示的数据
const tableData = [];

// 遍历审计数据中的每个分类
Object.keys(auditJson.gmbAuditData[0]).forEach(category => {
    const auditItems = auditJson.gmbAuditData[0][category];
    // 筛选done为No的项
    const undoneItems = auditItems.filter(item => item.done === "No");
    
    undoneItems.forEach(item => {
        // 从详情JSON中匹配对应数据
        const detailItem = detailJson.gmbDetailData[0][category].find(d => d.id === item.id);
        if (detailItem) {
            tableData.push({
                分类: category,
                ID: item.id,
                内容: detailItem.content
            });
        }
    });
});

// 生成Markdown表格
let table = "| 分类 | ID | 内容 |\n| --- | --- | --- |\n";
tableData.forEach(row => {
    table += `| ${row.分类} | ${row.ID} | ${row.内容} |\n`;
});

console.log(table);

输出的表格结果 #

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