Сортировка div по текстовому содержимому после вызова ajax

Question

Я хочу упорядочить некоторые div в алфавитном порядке после того, как они были получены из json в ajax-вызове.Я перепробовал все, но все решения онлайн не работали для меня.

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
}