如何让forEach循环处理深度嵌套对象以生成正确表格

原数据与代码 #

给定的JSON数据：

var chardata = [{"moveList": [{"name": "Directional Tests","synergy": [{"partner": "Character A","moveEqual": "Direct Synergy for A"}, {"partner": "Character B","moveEqual": "Direct Synergy for B"}]},{"name": "Motion Tests","synergy": [{"partner": "Character A","moveEqual": "Motion Synergy for A"}, {"partner": "Character B","moveEqual": "Motion Synergy for B"}]},{"name": "Button Tests","synergy": [{"partner": "Character A","moveEqual": "Button Synergy for A"}, {"partner": "Character B","moveEqual": "Button Synergy for B"}]}]}];

原生成表格的函数：

function buildSynergyTest(data) {
    var table = document.getElementById('CharacterSynergy');
    var html = '\n';

    for (character of data) {
        character.moveList.forEach(function(move, i) {
            html += ` <TR>\n`;
            html += `  <TD>${move.name}</TD>\n`;
            html += `  <TD>${move.synergy[i].partner}</TD>\n`;
            html += `  <TD>${move.synergy[i].moveEqual}</TD></TR>\n`;
        });
    }
    
    table.innerHTML += html;
}

buildSynergyTest(chardata);

问题原因 #

原代码错误地用moveList的循环索引i访问synergy数组元素：

• 当moveList的索引i超过当前move.synergy数组长度时（比如第三个move的i=2，但synergy仅含2个元素），会出现undefined或报错
• 这种逻辑只能让每个move对应一个synergy项，无法遍历所有嵌套的协同数据

修正后的代码 #

在moveList的循环内部，嵌套一层forEach遍历每个move的synergy数组，确保每个协同项都生成对应表格行：

function buildSynergyTest(data) {
    var table = document.getElementById('CharacterSynergy');
    var html = '\n';

    for (const character of data) {
        // 遍历每个动作
        character.moveList.forEach(function(move) {
            // 遍历当前动作下的所有协同项
            move.synergy.forEach(function(synergyItem) {
                html += ` <TR>\n`;
                html += `  <TD>${move.name}</TD>\n`;
                html += `  <TD>${synergyItem.partner}</TD>\n`;
                html += `  <TD>${synergyItem.moveEqual}</TD></TR>\n`;
            });
        });
    }
    
    table.innerHTML += html;
}

buildSynergyTest(chardata);

可选优化（合并动作名称单元格） #

如果希望同一个动作的名称只显示一次，可使用表格单元格合并属性rowspan：

function buildSynergyTest(data) {
    var table = document.getElementById('CharacterSynergy');
    var html = '\n';

    for (const character of data) {
        character.moveList.forEach(function(move) {
            const synergyCount = move.synergy.length;
            // 遍历协同项
            move.synergy.forEach(function(synergyItem, idx) {
                html += ` <TR>\n`;
                // 仅第一个协同项显示动作名称，并设置跨行数
                if (idx === 0) {
                    html += `  <TD rowspan="${synergyCount}">${move.name}</TD>\n`;
                }
                html += `  <TD>${synergyItem.partner}</TD>\n`;
                html += `  <TD>${synergyItem.moveEqual}</TD></TR>\n`;
            });
        });
    }
    
    table.innerHTML += html;
}

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