What is the best way to arrange an array to display country data based on Covid cases in descending order rather than alphabetical order?

This particular code snippet retrieves Covid19 statistics data using an API. Currently, it displays the data for covid cases of all countries in Alphabetical order. However, I am looking to present the data in descending order, meaning that the country with the highest number of cases should appear first in the table.

$.ajax({
  url: "https://api.covid19api.com/summary",
  type: "GET",
  dataType: 'JSON',
  success: function(data) {
    console.log(data);
    console.log(data.Countries);
    var sno = 1;
    $.each(data.Countries, function(key, value) {

      $("#country-wise").append("<tr>" +
        "<td>" + sno + "</td>" +
        "<td>" + value.Country + "</td>" +
        "<td>" + value.NewConfirmed + "</td>" +
        "<td>" + value.NewDeaths + "</td>" +
        "<td>" + value.NewRecovered + "</td>" +
        "<td>" + value.TotalConfirmed + "</td>" +
        "<td>" + value.TotalDeaths + "</td>" +
        "<td>" + value.TotalRecovered + "</td>" +
        "</tr>");
      sno++;
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="country-wise"></table>

Answer №1

Utilize the sort function within the Array object.

$.ajax({
  url: "https://api.covid19api.com/summary",
  type: "GET",
  dataType: 'JSON',
  success: function(data) {
    console.log(data);
    console.log(data.Countries);
    data.Countries.sort((a, b) => b.TotalConfirmed - a.TotalConfirmed);
    var sno = 1;
    $.each(data.Countries, function(key, value) {
      console.log(key + ":" + value);

      $("#country-wise").append("<tr>" +
        "<td>" + sno + "</td>" +
        "<td>" + value.Country + "</td>" +
        "<td>" + value.NewConfirmed + "</td>" +
        "<td>" + value.NewDeaths + "</td>" +
        "<td>" + value.NewRecovered + "</td>" +
        "<td>" + value.TotalConfirmed + "</td>" +
        "<td>" + value.TotalDeaths + "</td>" +
        "<td>" + value.TotalRecovered + "</td>" +
        "</tr>");
      sno++;
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="country-wise"></table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with JSON response after an update operation in Rails 3

I need some help understanding the response to my unedited controller method. Here's the code: def update @ledgeritem = Ledgeritem.find(params[:id]) respond_to do |format| if @ledgeritem.update_attributes(params[:ledgeritem]) ...

Session is required for req.flash() function in node.js to work properly

I recently started working with Node.js and I'm encountering an issue with sessions. I developed a simple application and tried to run it locally, but ran into some errors. Below are the details of my code along with the error messages: BAPS.js (app. ...

Pug Template Not Displaying Emojis or Special Characters in Sendgrid Email Subject Line

There seems to be an issue with rendering emojis or special characters in the subject header of the pug file, although they work perfectly in the body. I have compiled both the body and subject header separately using pug. const compileHtmlFunction = pug.c ...

Transferring SQL server dates to jQuery Calendar through AJAX communication

I am currently working on implementing a jQuery calendar example, and I want to load the dates from my SQL database instead of using hardcoded values. I am considering using Ajax post to send a request to my web method and retrieve the data. However, I am ...

"Encountering a new error with the creation of a user using AngularJS and Firebase

Attempting to create a user using Angular. myApp.controller('loginCtrl',['$scope','$firebaseAuth','config',function($scope,$firebaseAuth,config){ console.info('[APP-INFO] ~ loginCtrl Start') var ref = ne ...

Click to move directly to a specific section

This question may be common, but despite my research efforts, I have been unable to find a solution. I want to issue a disclaimer that I am new to javascript and jQuery. Here is an overview of what I am trying to achieve: I want two images that, when cli ...

What to do when CSS Overflow doesn't work as expected?

Are there any alternatives for browsers that don't support CSS overflow? I am working on a new layout that heavily relies on the overflow property, however it seems like android browsers do not handle it well and as a result, my layout is broken. I am ...

Spin a sphere by clicking on a link using three.js

I've designed a spherical object and have a group of links. I'm looking for a way to manipulate the position or rotation of the sphere by simply clicking on one of the links. Despite extensive searching, I haven't been able to find an exampl ...

Angular's parent div height can be adjusted using CSS transitions

I have implemented a CSS transition to create a sliding effect in my pagination. However, I am facing an issue where the height of the containing div changes even when I set the position of the transitioned elements. Here is a snippet of my CSS: .slide { ...

Express server experiences empty body when using the Fetch POST method

Executing a POST request from my browser client looks like this: const post = async (url, body) => { try { const response = await fetch(url, { method: `POST`, headers: { 'Conte ...

Problems with Material UI autocomplete causing destruction of Redux-form values

I'm facing an issue with integrating Material UI's autocomplete component into a Redux wizard form. Although I successfully linked the autocomplete feature, I encountered a problem when navigating back to the second page where the autocomplete f ...

How to Overcome Read-only HTML Components in Selenium with Python?

I am working on automating a task using Selenium in Python, and part of it involves selecting a date. The website I am testing has an input box for date selection that displays a standard date table when clicked. Unfortunately, the input text box is read- ...

Issue with exporting to Excel in AngularJS in Internet Explorer not functioning as expected

Having some trouble exporting data to Excel or PDF in IE, but it works fine in Chrome. Since most users will be using Internet Explorer, can someone please review my code and provide suggestions? Below is the Angular function I am using: scope. ...

reverting the effects of a javascript animation

I am expanding the size of a carousel on a specific pane by adjusting its height and position. Here is how I achieve this: if(currentPane==2) { $("#carousel").animate({height:320},1000); $("#carousel").animate({top:411},1000); $("#dropShadow") ...

What is the best way to send the link's ID to an AngularJS controller?

I have a scenario similar to the following: <a href="#" title="Post 1" id="car1"> Audi car </a> <a href="#" title="Post 1" id="car2"> BMW car </a> How can I pass the ID to the controller? I attempted the following: <a href= ...

Checking if a date is before another date in MomentJS without considering the

Recently, I've been utilizing momentJS to identify future dates without a specific day. Below is the code I've been working with along with the outcome: moment('09/2010').isBefore(moment().format('MM/YYYY'), 'day') ...

Testing if the App properly renders results in an error message: "No element found with the text: Profil"

I am struggling with testing Jest as I lack experience in this area. Specifically, I need to determine whether the App component is being rendered successfully. However, my test cases are failing. Upon checking the console log, I encountered the following ...

AngularJS constants are values that can be accessed and

Is it feasible to inject one constant into another constant using AngularJS? For example: var app = angular.module('myApp'); app.constant('foo', { message: "Hello" } ); app.constant('bar', ['foo', function(foo) ...

Sending a null variable via an AJAX post request from jQuery to PHP

Query: <table> <tr> <td id="percentage">Percent:&nbsp; <?php echo $percent; ?> %</td> </tr> </table> <div class="box-footer" style="float: right"> <a href="<?php echo base_url(); ?>stu ...

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Take a look at this code snippet: $(document).ready(function() { $('.scrollable-area').on('wheel', function(e) { var scrollLeft = $(this).scrollLeft(); var width = $(this).get(0).scrollWidth - $(this).width(); var delta ...