CODEWITHSUNDEEP
htmljquery
Ali Ghassan
Ali Ghassan

Reputation: 27

How to sort data according to date using jquery

l have data JSON coming from URL and l displayed those data in a table.

enter image description here

As you see l have different time dates. l want to add a new element above '12:15 am' to display the full date to make the user know that is a new day as the image below.

enter image description here

Code :

    function airport() {
    
            var airport_data = ""
    
            $.ajax('my_airport.json', {
                    type: 'GET',
                    dataType: 'json',
                    timeout: 5000,
                    cache: false,
    
            }).done(function (data, textStatus, jqXHR) {
    
                    data.forEach(element => {
                           
                            if (element.flight.status.generic.status.text == 'scheduled') {
                                    airport_data += '<tr>';
                                    airport_data += '<td><p>' + element.flight.airline.name + '</p></td>';
                                    airport_data += '<td><p>' + element.flight.identification.number.default + '</p></td>';
                                    if (element.flight.aircraft == null) {
                                            airport_data += '<td><p>N/A</p></td>';
                                    } else {
                                            airport_data += '<td><p>' + element.flight.aircraft.model.code + '</p></td>';
                                    }
                                    airport_data += '<td><p>' + element.flight.airport.origin.position.region.city + '</p></td>';
/// time is here
                                    airport_data += '<td><p>' + moment.unix(element.flight.time.scheduled.arrival).format("h:mm a") + '</p></td>';
                                    airport_data += '<td><p>' + element.flight.status.generic.status.text + '</p></td>';
                                    if (!element.flight.time.scheduled.arrival) airport_data += "<tr><td><p>N/A</p></td></tr>";
    
                            } 
                            document.getElementById("data").innerHTML = airport_data
                            var rows = $("#data");
                            rows.hide();
                            $('.row-data:last-child').after(rows);
                            rows.fadeIn(500);
                    });
    
            })
    
    
    
    }

html :

 <div class="table-responsive">
    <table class="table table-condensed text-center table-hover"">
            <thead>
              <tr>
                <th>AIRLINES</th>
                <th>CALLSIGN</th>
                <th>TYPE</th>
                <th>FROM</th>
                <th>TIME</th>
                <th>STATUS</th>
              </tr>
            </thead>
            <tbody id="data" class="data">

      </tbody>
    </table>
  </div>

Upvotes: 0

Views: 99

Answers (1)

Daniels118
Daniels118

Reputation: 1227

If the rows comes already sorted you just have to insert the additional rows every time the date is going to change. Do it this way:

  • before entering the forEach initialize a variable called prevDate with an empty string;
  • inside the foreach, before appending the flight row, format the arrival as YYYYMMDD and assign it to a variable called currentDate;
  • compare currentDate with prevDate, if they differ then add the date header;
  • assign currentDate to prevDate.

That's all.

EDIT

First, let me say you have a syntax error in your html, you have closed the double quote 2 times on the table class.

Second, your js code is iterating over the root of the json returned by the ajax call, but the json you have added in the comment has a more nested structure, the array is located down to "data.result.response.airport.pluginData.schedule.arrivals.data".

So, after resambling the above, your code should become like this:

<html>
    <head>
        <script src="jquery-2.x-git.min.js"></script>
        <script src="moment.js"></script>
        <script>
$(airport);

function airport() {
    
            var airport_data = ""
    
            $.ajax('my_airport.json', {
                    type: 'GET',
                    dataType: 'json',
                    timeout: 5000,
                    cache: false,
    
            }).done(function (data, textStatus, jqXHR) {
                    var prevDate = '';
                    data.result.response.airport.pluginData.schedule.arrivals.data.forEach(element => {
                            var curDate = moment.unix(element.flight.time.scheduled.arrival).format("YYYYMMDD");
                            if (curDate != prevDate) {
                                airport_data += '<tr><td colspan="5">ARRIVALS - '+
                                    moment.unix(element.flight.time.scheduled.arrival).format("dddd, MMM D")+
                                    '</td></tr>';
                                prevDate = curDate;
                            }
                            if (element.flight.status.generic.status.text == 'scheduled') {
                                    airport_data += '<tr>';
                                    airport_data += '<td><p>' + element.flight.airline.name + '</p></td>';
                                    airport_data += '<td><p>' + element.flight.identification.number.default + '</p></td>';
                                    if (element.flight.aircraft == null) {
                                            airport_data += '<td><p>N/A</p></td>';
                                    } else {
                                            airport_data += '<td><p>' + element.flight.aircraft.model.code + '</p></td>';
                                    }
                                    airport_data += '<td><p>' + element.flight.airport.origin.position.region.city + '</p></td>';
/// time is here
                                    airport_data += '<td><p>' + moment.unix(element.flight.time.scheduled.arrival).format("h:mm a") + '</p></td>';
                                    airport_data += '<td><p>' + element.flight.status.generic.status.text + '</p></td>';
                                    if (!element.flight.time.scheduled.arrival) airport_data += "<tr><td><p>N/A</p></td></tr>";
    
                            } 
                            document.getElementById("data").innerHTML = airport_data
                            var rows = $("#data");
                            rows.hide();
                            $('.row-data:last-child').after(rows);
                            rows.fadeIn(500);
                    });
    
            })
}
        </script>
    <head>
    <body>
        <div class="table-responsive">
            <table class="table table-condensed text-center table-hover">
                <thead>
                    <tr>
                        <th>AIRLINES</th>
                        <th>CALLSIGN</th>
                        <th>TYPE</th>
                        <th>FROM</th>
                        <th>TIME</th>
                        <th>STATUS</th>
                    </tr>
                </thead>
                <tbody id="data" class="data">
                    
                </tbody>
            </table>
        </div>
    </body>
</html>

The rest is a matter of styling.

Upvotes: 1

Related Questions