您能否按字母顺序对从 JSON 文件动态创建的 jQuery 列表进行排序

Can you alphabetically order a jQuery list which is being dynamically created from a JSON file?

本文关键字:创建 动态 jQuery 列表 排序 文件 JSON 顺序      更新时间:2023-09-26

我正在构建一个涉及jQuery移动目录的应用程序,该目录从JSON文件加载三个部分的名称。我想知道是否有办法自动按字母顺序排列 JSON 数组中的项目。委托该应用程序的人将来将需要添加项目,如果他们不必担心自己按字母顺序添加项目,对他们来说会更容易。由于 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");
        });
    });
})

杰森:

{
    "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"}
        ]
    }
}

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

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 中的所有子数组都包含带名称的对象时,后者才有效。

试试这个:

data.enterprise.humans.sort(function(a, b) {
  return a.firstName.localeComapre(b.firstName);
});