javascript - 使用 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);

还有这段用于执行 AJAX 请求的 javascript:

$('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() 方法，但它不起作用，因为它是一个对象而不是数组。然后我尝试创建一个数组:

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);

fiddle