MVC控制器返回JSON列表仅显示最后一项问题排查求助

这种情况我之前碰到过好多次，大概率是页面渲染时的覆盖问题或者循环里的变量作用域陷阱，咱们一步步拆解排查：

最常见的原因：DOM赋值时每次覆盖而非追加 #

如果你的页面渲染逻辑是类似下面这样的，那问题就很明确了：

// 假设data是控制器返回的列表数据
$.each(data, function(index, item) {
    // 每次直接替换元素内容，而不是追加新内容
    $('#showData').html(item.ProductName);
});

循环里每一次都会把#showData的内容彻底替换成当前item的值，循环跑完自然就只剩最后一项了。

解决办法：换成append()方法追加内容，或者先把所有HTML拼接好再一次性插入（后者性能更优）：

// 方法1：用append逐步追加
$.each(data, function(index, item) {
    $('#showData').append('<div class="item">' + item.ProductName + '</div>');
});

// 方法2：先拼接完整HTML字符串，再一次性赋值
let content = '';
$.each(data, function(index, item) {
    content += `<div class="item">${item.ProductName}</div>`;
});
$('#showData').html(content);

另一个常见坑：循环里的变量作用域问题 #

如果你的渲染逻辑涉及异步操作（比如定时器、事件绑定），而且用了var声明变量，就会因为变量提升导致所有回调都指向最后一个item：

// 错误示例：var导致的作用域陷阱
for (var i = 0; i < data.length; i++) {
    var item = data[i];
    // 异步操作里的item会指向最后一个元素
    $('#btn-' + i).click(function() {
        alert(item.ProductName);
    });
}

这里var声明的item是函数级作用域，循环结束后所有点击事件里的item都是最后一个元素。

解决办法：把var换成let（块级作用域），或者用闭包保存当前item：

// 方法1：用let声明变量，自带块级作用域
for (let i = 0; i < data.length; i++) {
    let item = data[i];
    $('#btn-' + i).click(function() {
        alert(item.ProductName);
    });
}

// 方法2：用闭包锁定当前循环的item
for (var i = 0; i < data.length; i++) {
    (function(currentItem) {
        $('#btn-' + i).click(function() {
            alert(currentItem.ProductName);
        });
    })(data[i]);
}

排除控制器数据问题 #

你提到弹窗能正常显示全部数据，说明控制器返回的JSON数组是没问题的，但保险起见可以在Chrome控制台里打印data，确认Array.isArray(data)返回true，数据结构是标准数组而非被意外包装的对象。

快速定位小技巧 #

你可以在循环里加一行console.log(item)，看看每次循环是不是都拿到了正确的元素——如果控制台能打印出所有item，那问题肯定出在DOM渲染的逻辑上；如果控制台也只显示最后一项，那就要检查循环本身的写法了。

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