JavaScript遍历飞机模型对象数组无响应，无法渲染表格求助

问题背景 #

接口返回的JSON数据如下：

{"airplane_models":[{"name":"A770","max_passenger":230},{"name":"A342","max_passenger":130},{"name":"A341","max_passenger":234},{"name":"B345","max_passenger":21}]}

通过window.alert(this.responseText)能正常看到响应内容，但调用displayModels(JSON.parse(this.responseText))后，既不渲染表格，window.alert(key)也没有任何输出。尝试修改JSDoc类型声明、改用Object.keys遍历均未解决问题。

原错误代码 #

/**
 * Updates the DOM tree in order to display users.
 *
 * @param {Array.<{name: String, max_passengers: Number}>} airplane_models
 */
function displayModels(airplane_models) {
    let tableBody = document.getElementById('tableBody');
    clearElementChildren(tableBody);
    airplane_models.forEach(model => {
        for(let key in model)
        {
            window.alert(key)
            tableBody.appendChild(createTableRow(key));
        }
    })
}

核心问题分析 #

1. 参数传入错误：接口返回的是包含airplane_models数组的对象，但调用时直接把整个解析后的对象传给了函数，而函数预期接收的是数组。此时airplane_models是普通对象，调用forEach不会执行（对象没有该方法，非严格模式下无反应）。
2. 字段名不匹配：JSDoc里写的是max_passengers，但JSON实际字段是max_passenger（单数），属于文档错误。
3. 渲染逻辑错误：原代码遍历每个机型的key（name、max_passenger）并单独添加一行，不符合表格“一行对应一个机型”的常规逻辑。

解决方案 #

步骤1：修正参数传入方式 #

调用函数时，要取出JSON对象里的airplane_models数组：

displayModels(JSON.parse(this.responseText).airplane_models)

步骤2：修正displayModels函数逻辑 #

调整遍历方式，每个机型生成一行，包含两个单元格分别显示名称和载客量：

/**
 * 更新DOM以显示飞机机型数据
 *
 * @param {Array.<{name: String, max_passenger: Number}>} airplaneModels
 */
function displayModels(airplaneModels) {
    const tableBody = document.getElementById('tableBody');
    clearElementChildren(tableBody);
    
    airplaneModels.forEach(model => {
        // 创建表格行
        const row = document.createElement('tr');
        // 创建名称单元格
        const nameCell = document.createElement('td');
        nameCell.textContent = model.name;
        // 创建载客量单元格
        const passengerCell = document.createElement('td');
        passengerCell.textContent = model.max_passenger;
        // 组装行并添加到表格主体
        row.appendChild(nameCell);
        row.appendChild(passengerCell);
        tableBody.appendChild(row);
    });
}

额外说明 #

如果你的createTableRow函数是用来生成完整表格行的工具函数，可以调整为：

// 接收机型对象，返回组装好的表格行
function createTableRow(model) {
    const row = document.createElement('tr');
    row.innerHTML = `<td>${model.name}</td><td>${model.max_passenger}</td>`;
    return row;
}

此时displayModels里的遍历可以简化为：

airplaneModels.forEach(model => {
    tableBody.appendChild(createTableRow(model));
});

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