AJAX成功后如何用JavaScript遍历Map对象并渲染表格数据

需求说明 #

AJAX请求成功后，需要从返回的reportData对象中提取数据，渲染成表格行。reportData包含Compute、Disks、Images等键，对应值为数据数组，预期渲染格式如下：

compute 2233.36 2097.09 2241.42 .....
disks 985.73 966.29 987.02 .....
images 0.56 0.56 0.57 ..... 
.... and so on

原代码问题 #

以下是我编写的代码，无法实现预期的表格主体渲染效果：

function getReportData(report_id, client_id){
        $.ajax({
            url: "/emerge/mvc/ajax/clientreportsearch/ReportCostData",
            data: {
                report_id: report_id,
                client_id: client_id
            },
            type: "POST",
            success: function (response) {
                var tbody = "", data = "", td1 = "", td2 = "";
                var mapEntry = "";
                if(response.reportData != null){
                    mapEntry = response.reportData;
                    Object.keys(mapEntry).forEach(function(value, key){
                        if(value != 'Total'){
                            td1 = td1+ "<td>"+key+"</td>";
                            data = data + "<tr>"+td1;
                            for(var i = 0; i < value.length; i++){
                                td2 = td2 + "<td>"+value[i]+"</td>";
                            }
                        }
                    });
                    tbody = tbody+data;
                    document.getElementById('thead').innerHTML = thead;
                    document.getElementById('reportdataDiv').style.display = "inline";
                }
            },
            error: function (error) {
                console.log(`Error ${error}`);
            }
        });
    }

服务器返回的reportData结构 #

reportData: 
  Compute: [2233.36, 2097.09, 2241.42, 2135.11, 2489.97, 2548.01, 2500.82, 2502.82, 2618.89, 2861.08, 2809.17]
  Disks: [985.73, 966.29, 987.02, 959.48, 1012.96, 1010.27, 1018.69, 1013.26, 1015.25, 1075.85, 1090.98]
  Images: [0.56, 0.56, 0.57, 0.55, 0.57, 0.56, 0.57, 0.57, 0.57, 0.6, 0.6, 0.59, 0.29, 7.16]
  Snapshots: [15.75, 11.09, 1.7, 1.65, 7.84, 7.68, 0.26, 1.45, 9.9, 4.55, 7.36, 7.15, 3.5, 79.87]
  Total: [2233.36, 2097.09, 2241.42, 2135.11, 2489.97, 2548.01, 2500.82, 2502.82, 2618.89, 2861.08, 2809.17]
  Virtual Machine: [1231.32, 1119.14, 1252.13, 1173.43, 1468.61, 1529.5, 1481.3, 1487.53, 1593.17, 1780.08, 1710.24]

问题分析与修正方案 #

原代码存在几个核心问题：

1. Object.keys(mapEntry).forEach的参数顺序错误：第一个参数是键名，第二个是索引，你搞成了value, key，导致取到的内容完全不对。
2. td1、td2没有在每次循环中重置，会不断累加之前的内容，导致表格结构混乱。
3. 没有闭合<tr>标签，HTML结构不完整。
4. thead变量未定义，直接赋值会报错。

修正后的代码如下：

function getReportData(report_id, client_id){
    $.ajax({
        url: "/emerge/mvc/ajax/clientreportsearch/ReportCostData",
        data: {
            report_id: report_id,
            client_id: client_id
        },
        type: "POST",
        success: function (response) {
            if(!response.reportData) return;
            
            let tbodyHtml = '';
            const reportData = response.reportData;
            
            // 遍历每个类别
            Object.keys(reportData).forEach(category => {
                // 跳过Total项
                if(category === 'Total') return;
                
                // 构建当前行的HTML
                let rowHtml = `<tr><td>${category}</td>`;
                // 遍历当前类别的数据数组，添加每个数据单元格
                reportData[category].forEach(value => {
                    rowHtml += `<td>${value}</td>`;
                });
                // 闭合行标签
                rowHtml += '</tr>';
                // 累加到tbody的HTML中
                tbodyHtml += rowHtml;
            });
            
            // 渲染表格主体（假设表格tbody的id是reportTbody，可根据实际修改）
            document.getElementById('reportTbody').innerHTML = tbodyHtml;
            // 显示报表容器
            document.getElementById('reportdataDiv').style.display = "inline";
            
            // 若需渲染thead，需先定义表头HTML，示例：
            // const theadHtml = '<tr><th>类别</th><th>数据1</th><th>数据2</th>...</tr>';
            // document.getElementById('thead').innerHTML = theadHtml;
        },
        error: function (error) {
            console.error('请求失败:', error);
        }
    });
}

关键改动说明 #

• 修正Object.keys遍历的参数顺序，正确获取类别名称和对应的数据数组。
• 每次循环重新构建当前行的HTML，避免内容累加导致的结构混乱。
• 确保HTML标签完整闭合，<tr>和<td>都正确收尾。
• 简化变量命名，提升代码可读性。
• 添加空值判断，避免无数据时的报错。
• 补充thead渲染的注释说明，需根据实际表头结构调整。

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