如何根据 JavaScript 中的日期对 API 数据进行排序？

Question

I am successfully retrieving the information from an API call but I was required to sort the data according to dates. Everything is perfect but when retrieving the data from API the data is not according to dates.

function retrieveInfo(container){
var user = userLoggedIn;
console.log(user);
container.html();
fetchNext5Days();

 dates.forEach(async (date) =>{
    url= API ;
    await fetch(url).then(async(res)=>{
        return await res.json();
    }).then(async (data)=>{
        data.centers.forEach(async (center)=>{
                var html = await createInfoFeedHtml(center);
                container.append(html);
        });
    })
    
})}

fetchNext5days function

async function fetchNext5Days(){
let today = moment();
for(let i = 0 ; i < 5 ; i ++ ){
    let dateString = today.format('DD-MM-YYYY')
    dates.push(dateString);
    console.log(dates)
    today.add(1, 'day');
}
}

This function is also outputting the dates correctly from ascending to descending order. 10-05-2021 11-05-2021 12-05-2021 13-05-2021 14-05-2021

The difference is in outputting the data.

function createInfoFeedHtml(center)
{
return `
<tr class= "dark-row">
<td>${center.sessions[0].date}</td>
<td >${center.name}</td>
<td> ${center.address}</td>
<td>${center.sessions[0].vaccine}</td>     
<td>${center.sessions[0].min_age_limit}</td> 
<td>${center.sessions[0].available_capacity}</td>                           
</tr>
        `
}

The data from the api is made into table rows and inserted into.

Pug file

block content    

.container
    .row
        .table-responsive.table-bordered.movie-table
            table.table.movie-table
                thead
                    tr.movie-table-head
                        th Date
                        th Name
                        th Address 
                        th Vaccine
                        th Age
                        th Availability
                    tbody

Answer 1

Your async function is returning data at different intervals so your date order is getting lost. Just write the elements to the page and sort them on their dates as they get written. I modified your createInfoFeedHtml function to put a timestamp on the divs

dates.forEach(async (date) =>{
    ....
    }).then(async (data)=>{
        data.centers.forEach(async (center)=>{
                var html = await createInfoFeedHtml(center);
                container.append(html);
                sortTableOnDate(container); 
                
        });
    })
    
})}
    
function createInfoFeedHtml(center)
{
 var timestamp = new Date(center.sessions[0].date).getTime();
return `
<tr class= "dark-row sortable"  data-timestamp='${timestamp}'>
<td>${center.sessions[0].date}</td>
<td >${center.name}</td>
<td> ${center.address}</td>
<td>${center.sessions[0].vaccine}</td>     
<td>${center.sessions[0].min_age_limit}</td> 
<td>${center.sessions[0].available_capacity}</td>                           
</tr>
        `
}

//sortTableOnDate will gather a set of divs and sort them ascendingly from their timestamp attribute
function sortTableOnDate(container) {
  $(container).find('.sortable').sort(function(a, b) {
     return +a.getAttribute('data-timestamp') - +b.getAttribute('data-timestamp');
  })
  .appendTo($(container));
}