根据jQuery的值对JSON数组进行排序。

I've got two dropdown select dropdowns: one for regions and one for cities in the selected region. The result is loaded by AJAX and in my response i get all cities in an JSON array:

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

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

I'm using this small plugin to load the data in the select dropdown:

我正在使用这个小插件来加载select下拉菜单中的数据:

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

And this piece of javascript to do the AJAX request:

这段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');
});

All works totally fine, except the city dropdown is automatically sorted on the JSON array key. I tried to use the sort() method for this, but it won't work because it's an Object and not an array. Then i tried to create an array of it:

除了城市下拉菜单在JSON数组键上自动排序外，一切都运行良好。我尝试使用sort()方法来实现这一点，但它不起作用，因为它是对象而不是数组。然后我尝试创建一个数组:

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

But for some reason, the dropdown list fills itself up from 1 to the first found id (key of array) of the city, and i don't know why it's doing that (array itself looks fine).

但是出于某种原因，下拉列表将自己从1填充到第一个找到的id(数组的键)，我不知道为什么它会这样做(数组本身看起来很好)。

How can i sort the thing so my cities are ordered alphabetically in the dropdown list?

我如何排序，使我的城市按字母顺序在下拉列表中?

2 个解决方案

#1

It needs to be converted to an array so that it can be sorted. Let's assume this is your object. Note that I rearranged it to be unsorted, to prove this works.

它需要转换成一个数组，这样就可以进行排序。假设这是你的对象。注意，我将它重新排列为无序，以证明这是有效的。

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

Now to create an array version we need to create an array, and insert objects into it. I'm calling the keys "year". Note that we're calling parseInt on the keys. Keys in JavaScript (except for arrays) are always strings. For example, {foo: "bar"} has a string key "foo". This also applies to numerical looking keys.

现在要创建一个数组版本，我们需要创建一个数组，并将对象插入其中。我把钥匙叫做“年”。注意，我们在键上调用parseInt。JavaScript中的键(除了数组)总是字符串。例如，{foo: "bar"}有一个字符串键"foo"。这也适用于数值化的键。

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

There's a chance that we have our data out of sort right now, so we manually sort it. Note that this is a case sensitive sort. For example, "Qux" comes before "foo".

有可能我们的数据现在不排序了，所以我们手动排序。注意，这是一个区分大小写的排序。例如，“Qux”在“foo”之前。

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

The function now just pulls option.year and option.word from our array.

函数现在只需要选择。和选项。词从数组中。

$.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);
    });
};

And then you finally use the plugin, passing the array. You can put all of this code in the plugin, if that works best for you.

然后你最终使用插件，传递数组。如果这对你来说是最好的，你可以把所有这些代码都放到插件里。

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

fiddle

#2

This will do what you want and take care of the empty ids/undefined values:

这将做你想做的，并照顾空的id /未定义的值:

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

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

values.sort();

$.each(values, function(index, value) {
    if(value != undefined) {
        $("#Profile_cityId").append("<option>"+ value +"</option");
    }
});

Just replace the append I put in with your own function because jsFiddle was giving me trouble using that. Demo: http://jsfiddle.net/R4jBT/3/

用你自己的函数替换我添加的附加项，因为jsFiddle会给我带来麻烦。演示:http://jsfiddle.net/R4jBT/3/