MVC视图中JS循环生成选项对象数组异常，显示[object Object]求助

你遇到的问题核心是数据结构不匹配：

原来的硬编码是键值对对象 #

你最初的options是一个普通对象，键是状态ID，值是状态名称：

var options = { '0': '', '1': 'Pending', '2': 'In Progress', '3': 'Done' };

这种结构可以直接通过ID映射到对应的名称，渲染下拉框时能正确显示文本。

你的循环代码生成了对象数组 #

但你后来的代码把options定义成了数组，并且每次循环往数组里push一个{id: name}的小对象：

var options = []; 
for (var i = 0; i < statusList.length; i++) { 
  var id = statusList[i]["Id"]; 
  var name = statusList[i]["Status"]; 
  options.push({id : name}); 
}

最终得到的是类似[{0: ""}, {1: "Pending"}, ...]的数组，当你尝试用这个数组渲染下拉选项时，每个元素是对象，浏览器会把它转成字符串[object Object]，这就是你看到的问题。

修正方案：生成和硬编码一致的键值对对象 #

只需要把options改成对象类型，然后直接给对应的ID键赋值即可：

// 定义为对象而非数组
var options = {}; 
for (var i = 0; i < statusList.length; i++) { 
  var id = statusList[i]["Id"]; 
  var name = statusList[i]["Status"]; 
  // 直接给对象的ID键赋值状态名称
  options[id] = name; 
}

额外验证（可选） #

如果想确认生成的结构是否正确，可以在控制台打印看看：

console.log(options);
// 应该输出和硬编码一样的结构：{0: "", 1: "Pending", ...}

这样修改后，你的下拉框就能正确显示状态名称了。

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