如何用jQuery对Ajax获取的动态数组排序并填充下拉选框？

首先看你碰到的Uncaught TypeError: array1.sort is not a function报错，原因一目了然：你的array1和array2根本不是数组！

你初始化的时候确实声明了空数组，但在Ajax的success回调里，你用array1 = response.response.data[i].start_time直接把单个时间数值赋值给了array1，把之前的空数组完全覆盖掉了！最后array1变成了一个纯数字，自然没有sort方法，调用它肯定会报错。你console.log出来的28800、14400其实是循环最后一次的单个值，不是数组哦。

接下来给你完整的修正方案：

步骤1：正确收集数组数据 #

把赋值改成数组的push方法，把每个item的start_time和end_time分别添加到对应的数组里：

var array1 = []; // 用[]初始化数组比Array()更简洁直观
var array2 = [];

$.ajax({
    url:"/api/v1/workingspots",
    type: "GET",
    dataType: 'json',
    async: false, // 注意：async:false已经被jQuery废弃，后续建议改成异步Promise写法，先按你的需求适配
    success: function(response){
        // 遍历接口返回的数据，把时间值推入对应数组
        for (var i = 0; i < response.response.data.length; i++) {
            array1.push(response.response.data[i].start_time);
            array2.push(response.response.data[i].end_time);
        }

        // 步骤2：正确排序数组
        // 数字排序必须返回a-b（升序）或b-a（降序），之前return a>b的写法会返回布尔值，排序逻辑会出错
        array1.sort(function(a, b) {
            return a - b;
        });
        array2.sort(function(a, b) {
            return a - b;
        });

        // 步骤3：填充到下拉选框
        var $dropdown = $('#dropdown');
        // 这里默认把对应下标的start和end配对成时间段选项，你可以根据需求调整显示文本
        array1.forEach(function(start, index) {
            var end = array2[index];
            // 把秒级时间戳转成易读的小时格式，比如28800秒=8小时
            var optionText = (start/3600) + "时 - " + (end/3600) + "时";
            var $option = $('<option>').val(start + '-' + end).text(optionText);
            $dropdown.append($option);
        });
    }
});

额外优化建议 #

• 别再用async: false了，它会阻塞浏览器主线程，影响页面体验。jQuery的Ajax返回的是Promise，你可以改成异步写法：

var array1 = [];
var array2 = [];

$.ajax({
    url:"/api/v1/workingspots",
    type: "GET",
    dataType: 'json'
}).done(function(response){
    // 收集数据、排序、填充下拉框的逻辑全部放在这里
}).fail(function(err){
    console.error('请求接口出错：', err);
});

• 排序函数里一定要返回数字（负数、0、正数），return a > b这种返回布尔值的写法会让排序结果混乱，必须用return a - b（升序）或者return b - a（降序）。

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