Question

我想在ajax调用中从json中检索它们之后按字母顺序排序一些div。我已经尝试了一切，但所有在线解决方案都不适用于我。

HTML：

<section style="padding-top: 60px; padding-bottom: 30px">
        <div class="col-8" style="margin: auto auto">
            <h2 style="padding-bottom: 30px">Our People</h2>
        </div>
        <div class="col-lg-9 col-10 mx-auto" style="margin: 0 auto">
            <div class="band people">
                <!-- People loaded here -->
            </div>
        </div>
    </section>

    <!-- Load people -->
    <script src="../assets/js/people.js"></script>    

    <script>
        $(function(){
            $(".person").sort(function(a, b) {
                if (a.textContent < b.textContent) {
                    return -1;
                } else {
                    return 1;
                }
            }).appendTo(".people");
        });
    </script>

JS：

 $(document).ready(function () {
console.log("READY");

//execute ajax call
$.ajax({
    method: "GET",
    dataType: "json",
    url: "../assets/db/people.json",
    success: function (response) {
        console.log(response); //log response
        loadData(response); //load the response date in html
    },
    error: function (request, error) {
        console.log(request, error);
    }
});
});

function loadData(json) {

console.log(json);
var el = "";

//for each person create a div
for (var i = 0; i < json.people.length; i++) {
    console.log(json.people[i].id);

    //create div element
    el += '<div class="person"><a href="./person.html?id='+json.people[i].id+'" class="card"><div class="thumb" style="background-image: url('+json.people[i].image+');"></div><article><h6>'+json.people[i].firstname+' '+json.people[i].lastname+'</h6><span style="text-align: right">'+json.people[i].role+'</span></article></a></div>';
}

$(".people").append(el); //append person to people
}

JSON：

{  
   "people":[  
      {  
         "id":"p01",
         "firstname":"Sean",
         "lastname":"Doe",
         "role":"Doctor",
         "image":"../assets/img/person1.jpg"
      },
    {  
         "id":"p08",
         "firstname":"Michael",
         "lastname":"Brown",
         "role":"Driver",
         "image":"../assets/img/person2.jpg"
     }
  ]

}

我希望我很清楚，先谢谢你的帮助。我是网络开发的新手，所以如果我犯了一些愚蠢的错误或者解释得不好，我很抱歉。

Answer 1

您可以通过订购response数组来完成此操作，如下所示：

首先添加一个辅助函数，它将帮助您对对象数组进行排序：

function GetSortOrder(prop) {  
    return function(a, b) {  
        if (a[prop] > b[prop]) {  
            return 1;  
        } else if (a[prop] < b[prop]) {  
            return -1;  
        }  
        return 0;  
    }  
}

在loadData()函数中使用它：

function loadData(json) {

    var peoples = json.people.sort(GetSortOrder('lastname')); // Here you can give the any property name right now I used 'lastname'

    var el = "";

    //for each person create a div
    for (var i = 0; i < peoples.length; i++) {
        console.log(peoples[i].id);

        //create div element
        el += '<div class="person"><a href="./person.html?id='+peoples[i].id+'" class="card"><div class="thumb" style="background-image: url('+peoples[i].image+');"></div><article><h6>'+peoples[i].firstname+' '+peoples[i].lastname+'</h6><span style="text-align: right">'+peoples[i].role+'</span></article></a></div>';
    }

    $(".people").append(el); //append person to people
}

在ajax调用之后对文本内容的div进行排序

1 个答案: