解决JavaScript用JSON填充SELECT下拉框时的TypeError问题

问题背景 #

现有如下JSON格式的地区数据：

sampledata = [
    { "Districtname": "CENTRAL DELHI", "ID": 1 },
    { "Districtname": "NORTH DELHI", "ID": 2 },
    { "Districtname": "NORTH EAST DELHI", "ID": 3 },
    { "Districtname": "NORTH WEST DELHI", "ID": 4 },
    { "Districtname": "SOUTH DELHI", "ID": 5 },
    { "Districtname": "SOUTH EAST DELHI", "ID": 6 },
    { "Districtname": "SOUTH WEST DELHI", "ID": 7 },
    { "Districtname": "WEST DELHI", "ID": 8 }
]

使用原生for循环可以正常将数据填充到id="dist"的SELECT下拉框：

success: function(data) {
    var distList = data.d;
    console.log(distList);
    // console输出为上述数组对象
    var s = '<option value="-1">Please Select a District</option>';
    for (var i = 0; i < distList.length; i++) {
        s += '<option value="' + distList[i].ID + '">' + distList[i].Districtname + '</option>';
    }
    $("#dist").html(s);
}

但使用jQuery的$.each方法时出现报错：

$.each(distList, function (key, value) {
  $('#dist').append('<option value="' + key + '">' + value + '</option>');
});

报错信息：

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"Districtname":"CENTRAL.................... ,{"Districtname":"WEST DELHI","ID":8}]

解决方法 #

1. 核心问题分析 #

报错提示表明distList是JSON格式的字符串，而非可直接遍历的JavaScript数组对象。$.each内部逻辑会检查遍历目标的length属性，对字符串执行该操作时就会抛出上述错误。此外原$.each代码还存在属性访问错误：直接拼接对象会显示[object Object]，且误用遍历索引作为option的value值。

2. 修正后的代码 #

success: function(data) {
    // 先确保数据被解析为JavaScript数组对象
    var distList = typeof data.d === 'string' ? JSON.parse(data.d) : data.d;
    
    // 初始化下拉框，添加默认选项
    $('#dist').html('<option value="-1">Please Select a District</option>');
    
    // 使用$.each正确遍历数组
    $.each(distList, function(index, item) {
        // 访问对象的ID和Districtname属性
        $('#dist').append('<option value="' + item.ID + '">' + item.Districtname + '</option>');
    });
}

3. 关键说明 #

• 数据解析：如果后端返回的data.d是JSON字符串，必须用JSON.parse()将其转换为JavaScript数组，才能被$.each正确遍历。
• 属性访问：$.each遍历数组时，回调函数的第二个参数是数组中的每个对象元素，需要通过item.ID和item.Districtname获取对应值，而非直接使用索引或对象本身。

内容的提问来源于stack exchange，提问作者Khushi Soni Rajpoot