如何在JavaScript中解析特定结构JSON并渲染为HTML表格？

首先，我们需要处理JSON中字段值为单元素数组的结构，提取数组内的实际值，再动态生成目标HTML表格。以下是完整的实现方案：

1. 页面准备 #

先在HTML中添加一个用于承载表格的容器：

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

2. 改进后的JavaScript代码 #

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

readTextFile("./data.json", function(text){
    var data = JSON.parse(text);
    // 获取员工详情数组
    const empDetails = data.emp_details;
    if (!empDetails.length) return; // 处理空数据情况

    // 1. 生成表头：从第一个员工对象提取键名
    const headers = Object.keys(empDetails[0]);
    let tableHTML = `
        <div class="s-table-container">
            <table class="s-table">
                <thead>
                    <tr>
                        ${headers.map(header => `<th style="text-align: left;">${header}</th>`).join('')}
                    </tr>
                </thead>
                <tbody>
    `;

    // 2. 生成表格内容行：遍历每个员工，提取数组中的实际值
    empDetails.forEach(emp => {
        tableHTML += '<tr>';
        headers.forEach(header => {
            // 取数组的第一个元素作为单元格内容
            const value = emp[header][0];
            tableHTML += `<td style="text-align: left;">${value}</td>`;
        });
        tableHTML += '</tr>';
    });

    // 3. 闭合表格标签
    tableHTML += `
                </tbody>
            </table>
        </div>
    `;

    // 4. 将生成的表格插入到页面容器中
    document.getElementById('table-container').innerHTML = tableHTML;
});

代码说明 #

• 数据提取：data.emp_details是存储员工数据的数组，直接遍历这个数组即可，无需额外存入dataArray。
• 表头生成：使用Object.keys()获取第一个员工对象的所有键名，动态生成表头<th>标签。
• 内容行生成：遍历每个员工对象，对每个字段取数组的第一个元素（emp[header][0]），适配你的JSON结构特点。
• 动态拼接HTML：用模板字符串（`）拼接HTML内容，比传统字符串拼接更简洁易读。
• 插入页面：通过innerHTML将生成的表格HTML插入到预先准备的容器中。

额外建议 #

• 如果后续可能遇到字段值为空数组的情况，可以添加判断：const value = emp[header][0] || '';，避免显示undefined。
• 从Python转JS，注意两者数组和对象操作的差异：比如Object.keys()对应Python的dict.keys()，数组的forEach()对应Python的for...in循环。

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