javascript - 您可以按字母顺序排列从 JSON 文件动态创建的 jQuery 列表吗？

Question

我正在构建一个涉及 jQuery 移动目录的应用程序，该目录从 JSON 文件加载三个部分的名称。我想知道是否有一种方法可以自动按 JSON 数组中的项目按字母顺序排列。委托(delegate)该应用程序的人将来需要添加项目，如果他们不必担心自己按字母顺序添加项目，那么对他们来说会更容易。由于 IP 的原因，我在这里放置的代码略有不同，但它应该以相同的方式工作。澄清一下，正确的代码将只有“name”，而不是“firstName”和lastName“，因此不需要按姓氏排序。

编辑:我意识到这个问题是重复的，我不确定我可以证明它是如何独特的，但是对我有用的解决方案没有在其他页面上给出，所以该页面不会回答我的问题问题。

html:

<div data-role="page" id="home"> 
            <div data-role="header">
                <h1>Star Trek: The Next Generation</h1>
            </div>
            <div data-role="main" class="ui-content">
                <div data-role="collapsible" data-collapsed="true">
                    <h2>Humans</h2>
                    <ul id="humans" data-role="listview" data-filter="true" data-inset="true" data-icon="user" data-autodividers="true">
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h2>Robots</h2>
                    <ul id="robots" data-role="listview" data-filter="true" data-inset="true" data-icon="gear" data-autodividers="true"> 
                    </ul>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h2>Wesley</h2>
                    <ul id="wesleys" data-role="listview" data-filter="true" data-inset="true" data-icon="forbidden" data-autodividers="true">
                    </ul>
                </div>
            </div>
        </div>

JavaScript:

$(document).ready( function() {
    $.getJSON("assets/js/starTrek.json", function(data){
        $.each(data.enterprise.humans, function(){
            $("ul#humans").append('<li>' + '<a href="#' + this["url"] + '" data-transition="slide">'+ this["firstName"] + ' ' + this["lastName"] + '</a>' + '</li>');
            $("ul#humans").listview("refresh");
        });
        $.each(data.enterprise.robots, function(){
            $("ul#robots").append('<li>' + '<a href="#' + this["url"] + '" data-transition="slide">'+this["firstName"] + ' ' + this["lastName"] + '</a>' + '</li>');
            $("ul#robots").listview("refresh");
        });
        $.each(data.enterprise.wesleys, function(){
            $("ul#wesleys").append('<li>' + '<a href="#' + this["url"] + '" data-transition="slide">'+ this["firstName"] + ' ' + this["lastName"] + '</a>' + '</li>');
            $("ul#wesleys").listview("refresh");
        });
    });
})

JSON:

{
    "enterprise": {
        "humans": [
        { "firstName":"Jean Luc" , "lastName":"Picard" , "url":"picard"}, 
        { "firstName":"Miles" , "lastName":"O'Brien" , "url":"obrien"},
        { "firstName":"Will" , "lastName":"Riker" , "url":"riker"}  
        { "firstName":"Beverly" , "lastName":"Crusher" , "url":"crusher"},
        { "firstName":"Deanna" , "lastName":"Troi" , "url":"troi" },
        { "firstName":"Mr" , "lastName":"Worf" , "url":"worf"},
        ],

    "robots": [
        { "firstName":"Data" , "lastName":" " , "url":"data"}
        ],

    "wesleys": [
        { "firstName":"Wesley" , "lastName":"Crusher" , "url":"wesley"}
        ]
    }
}

Answer 1

可能最高效的解决方案是查询已经排序的数据(例如，如果数据来自数据库，则这是相对简单的)。您还可以选择在服务器端进行排序。例如，在前端您可以使用

data.enterprise.humans.sort(function(first, second) {
    return first.name.localeCompare(second.name);
});

您应该通过重复代码或编写循环来对 data.enterprise.robots 和 data.enterprise.wesleys 执行相同的操作，例如:

for (key in data.enterprise) {
    data.enterprise[key].sort(function(first, second) {
        return first.name.localeCompare(second.name);
    });
}

请注意，后者仅在 data.enterprise 中的所有子数组都包含具有名称的对象时才有效。