使用jQuery基于值对JSON数组进行排序

Question

我有两个下拉选择下拉列表:一个用于区域,一个用于所选区域中的城市.结果由AJAX加载,在我的响应中,我得到了JSON数组中的所有城市:

{
    1709: "Geertruidenberg", 
    1710: "Netersel", 
    1711: "Macharen", 
    1712: "Beers", 
    1713: "Hank", 
    1714: "Oudemolen", 
    1715: "Nistelrode"
}

我正在使用这个小插件来加载选择下拉列表中的数据:

(function($, window) {
    $.fn.replaceOptions = function(options) {
        var self, $option;

        this.empty();
        self = this;

        $.each(options, function(index, option) {
            $option = $("<option></option>")
                .attr("value", index)
                .text(option);
            self.append($option);
        });
    };
})(jQuery, window);

而这段javascript做的AJAX请求:

$('select#Profile_regionId').change(function() {
    $.post('/ajax/getcities', {regionid: $(this).val()}, function(data){
        //console.log(data.cities);
        $("select#Profile_cityId").replaceOptions(data.cities);
    }, 'json');
});

所有工作完全正常,除了城市下拉列表自动按JSON数组键排序.我尝试使用sort()方法,但它不起作用,因为它是一个Object而不是一个数组.然后我尝试创建它的数组:

var values = [];
$.each(data.cities, function(index,value)) {
    values[index] = value;
}

但由于某些原因,在下拉列表填充自身高达1到第一个找到城市的ID(数组的键),我不知道它为什么这样做(阵列本身看起来不错).

我如何对事物进行排序,以便我的城市按照字母顺序排列在下拉列表中？

Answer 1

它需要转换为数组才能对其进行排序.我们假设这是你的对象.请注意,我重新排列它是未分类的,以证明这是有效的.

originalData = {
    1712: "Beers", 
    1709: "Geertruidenberg", 
    1710: "Netersel", 
    1713: "Hank", 
    1714: "Oudemolen", 
    1711: "Macharen", 
    1715: "Nistelrode"
};

现在要创建一个数组版本,我们需要创建一个数组,并将对象插入其中.我把钥匙称为"年".请注意,我们在键上调用parseInt.JavaScript中的键(数组除外)始终是字符串.例如,{foo: "bar"}有一个字符串键"foo".这也适用于数字外观键.

var dataArray = [];
for (year in originalData) {
    var word = originalData[year];
    dataArray.push({year: parseInt(year), word: word});
}

我们现在有可能将数据排除在外,因此我们手动对其进行排序.请注意,这是区分大小写的排序.例如,"Qux"出现在"foo"之前.

dataArray.sort(function(a, b){
    if (a.word < b.word) return -1;
    if (b.word < a.word) return 1;
    return 0;
});

该函数现在只从我们的数组中提取option.year和option.word.

$.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
        $option = $("<option></option>")
            .attr("value", option.year)
            .text(option.word);
        self.append($option);
    });
};

然后你最终使用插件,传递数组.如果最适合您,您可以将所有这些代码放在插件中.

$('#mylist').replaceOptions(dataArray);

小提琴