JQuery $.each遍历JSON数据失败，无法动态生成复选框求助

你的代码里有几个关键错误导致遍历失败，我来一步步帮你修正：

1. 遍历对象错误 #

你返回的colours是一个数组（包含多个颜色对象），但你写的是$.each(colours.id, ...)——colours是数组，根本没有id属性，所以这个遍历的目标是undefined，自然会出错。应该直接遍历colours这个数组本身。

2. 变量名冲突 #

循环回调里的参数你用了colours，和外部接收响应的变量名重名了，这会导致内部的colours覆盖外部的数组，无法正确访问每个颜色对象的属性。建议把内部参数改成colour（单数）更清晰。

3. 属性名大小写不匹配 #

返回的JSON里键是Id（大写I）和Name，但你代码里用的是colours.id（小写i），这会取不到对应的值，导致复选框的id、value和显示文本都不对。

4. 无需手动解析JSON #

你已经设置了dataType: 'json'，jQuery会自动把响应内容解析成JavaScript对象/数组，所以不需要再用jQuery.parseJSON(colours)，反而会出问题。

修正后的代码 #

$.ajax({
  url: "Home/Colours",
  type: 'GET',
  contentType: "application/json; charset=utf-8",
  dataType: 'json',
  success: function (colours) {
    // 直接遍历colours数组，内部参数用单数colour避免冲突
    $.each(colours, function (i, colour) {
      // 使用正确的大写Id和Name属性，同时用模板字符串让代码更易读
      const checkboxHtml = `<p><input type='checkbox' id='box${colour.Id}' value='${colour.Id}' class='checkbox'>${colour.Name}</p>`;
      $('#ColourCheck').append(checkboxHtml);
    });
  },
  // 建议加上错误回调，方便调试请求失败的情况
  error: function(xhr, status, error) {
    console.error('请求颜色数据失败:', error);
  }
});

额外优化建议 #

• 使用ES6的模板字符串（反引号`）代替字符串拼接，代码更清晰，也避免了引号转义的问题。
• 加上error回调，方便排查请求本身的错误（比如控制器路由不对、返回数据格式错误等）。
• 如果颜色数量较多，建议先把所有HTML字符串拼接好，再一次性append到DOM里，减少DOM操作次数，提升性能：

success: function (colours) {
  let html = '';
  $.each(colours, function (i, colour) {
    html += `<p><input type='checkbox' id='box${colour.Id}' value='${colour.Id}' class='checkbox'>${colour.Name}</p>`;
  });
  $('#ColourCheck').html(html); // 用html()代替多次append()
}

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