0

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. Dates are not in order

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
Vikas Konaparthi
  • 33
  • 1
  • 6
  • 1
    Does this answer your question? [How to sort an object array by date property?](https://stackoverflow.com/questions/10123953/how-to-sort-an-object-array-by-date-property) – Nils Kähler May 10 '21 at 05:34
  • But i cannot fetch the data according to date. – Vikas Konaparthi May 10 '21 at 05:47
  • I'm not sure what you are trying to do. What is the problem, can't you just sort the dates before sending it or after receiving it? If you can make a [mwe](https://stackoverflow.com/help/minimal-reproducible-example) It would be much easier to help you. – Nils Kähler May 10 '21 at 06:03
  • I am having the dates in an array are sorted but while fetching and displaying on the webpage the dates are in jumbled order, not the way in which I need them. – Vikas Konaparthi May 10 '21 at 06:08
  • Only while fetching the info the dates are not in sequence. – Vikas Konaparthi May 10 '21 at 06:09
  • If you can, it would be probably better to sort server side. – The Fool May 10 '21 at 06:44

1 Answers1

0

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));
}
Kinglish
  • 23,358
  • 3
  • 22
  • 43