Develop Reference

how to sort array to show data of countries with covid cases in descending order instead of alphabetical order? [duplicate]

This question already has answers here:
Sorting an array of objects by property values
(35 answers)
Closed 2 years ago.
this code is fetching data of Covid19 statistics using API currently its showing data of covid cases of all countries in Alphabetical order ......i want to show data in descending order i.e country with more cases should come first in 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>

Use the sort method of Array.
$.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>

JSON Formatting Issue?

I am trying to populate an html table of JSON data. I was provided the JSON data and cannot determine why it isn't populating but suspect the JSON may not be formatted properly. When I use other sample data it works, then when I sub in the JSON I was provided it doesn't work. I've tried copying the JSON into a file on my direct server, linking to what I was provided (here: https://boiling-fortress-75456.herokuapp.com/) and inserting it on myjson.com and reformatting the JSON data.
Here is my code:
<script>
$(function() {
var entries = [];
var dmJSON = "https://api.myjson.com/bins/6sjud?callback=?";
$.getJSON(dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
});
});
</script>
<div class="wrapper">
<div class="profile">
<table id= "incentive" border="1">
<thead>
<th>Rank</th>
<th>Name</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>Highest Rank</th>
<th>Personal Volume</th>
<th>Team Volume</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>

You need to get the objects from affiliate
$.each(data.affiliate, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
Response from service
{
"affiliate":[{
"rank":1,"name":"Sally","march_rank":"Gold","april_rank":"Silver","may_rank":"Silver","highest_rank":"Silver","team_volume":12345
},{
"rank":2,"name":"Zelda","march_rank":"Gold","april_rank":"Bronze","may_rank":"Silver","highest_rank":"Gold","team_volume":12345
}
]
}

Imitate mouse click

I need to imitate mouse click on "Name" td after table draws, so it looks like sorting by name is default.
var link = "https://jsonplaceholder.typicode.com/users";
var usersData = [];
$(".buttonLoad").click(function () {
$(".buttonLoad").remove();
$.getJSON(link, function (data) {
usersData = data;
// Table draw
for(var i = 0; i < usersData.length; i++){
$("#users").append("<tr><td>" + usersData[i].id + "</td>" + "<td>" + usersData[i].name + "</td>"
+ "<td>" + usersData[i].username + "</td>" + "<td>" + usersData[i].email + "</td>"
+ "<td>" + usersData[i].address.street + "</td>" + "<td>" + usersData[i].address.suite + "</td>"
+ "<td>" + usersData[i].address.city + "</td>" + "<td>" + usersData[i].address.zipcode + "</td>"
+ "<td>" + usersData[i].address.geo.lat + "</td>"
+ "<td>" + usersData[i].phone + "</td>"
+ "<td>" + usersData[i].website + "</td>" + "<td>" + usersData[i].company.name + "</td>"
+ "<td>" + usersData[i].company.catchPhrase + "</td>" + "<td>" + usersData[i].company.bs + "</td></tr>" )
}
});
$("table").removeClass("hide");
$('th.sort').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc;
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }
});
.hide{
display: none;
}
button{
margin: 3px;
}
table {
width: 100%;
margin: auto;
margin: 3px;
}
table th {
font-weight: bold;
}
table th, table td {
padding: 3px;
border: 1px solid #000;
}
thead th{
font: bold italic 100% sans-serif;
background-color: #f7e1b5;
}
.sort{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<button class="buttonLoad">Load data</button>
<table id="users" border="1" class="hide">
<thead>
<tr>
<th>ID</th>
<th class="sort" id="defaultSort">Name</th>
<th class="sort">Username</th>
<th class="sort">Email</th>
<th class="sort">Street</th>
<th>Suite</th>
<th>City</th>
<th>Zipcode</th>
<th>Geo</th>
<th>Phone</th>
<th>Website</th>
<th class="sort">CompanyName</th>
<th>CatchPhrase</th>
<th>bs</th>
</tr>
</thead>
</table>
Things like .trigger("click") or element.click() don't work at all.

Calls to methods like click or trigger should be made after your dom elements are ready for the purpose of the scenario that you want to achieve.
if your case, you were trying to sort them before the elements are fully loaded into the page, so whatever solution that you will be trying, it will simply not work cause that we are missing something here.
Now, consider this modified version of your getJson function:
$.getJSON(link, function(data) {
usersData = data;
// Table draw
for (var i = 0; i < usersData.length; i++) {
$("#users").append("<tr><td>" + usersData[i].id + "</td>" + "<td>" + usersData[i].name + "</td>" + "<td>" + usersData[i].username + "</td>" + "<td>" + usersData[i].email + "</td>" + "<td>" + usersData[i].address.street + "</td>" + "<td>" + usersData[i].address.suite + "</td>" + "<td>" + usersData[i].address.city + "</td>" + "<td>" + usersData[i].address.zipcode + "</td>" + "<td>" + usersData[i].address.geo.lat + "</td>" + "<td>" + usersData[i].phone + "</td>" + "<td>" + usersData[i].website + "</td>" + "<td>" + usersData[i].company.name + "</td>" + "<td>" + usersData[i].company.catchPhrase + "</td>" + "<td>" + usersData[i].company.bs + "</td></tr>")
}
// finished loading, now sort by name
$(".sort.default").click();
});
Don't worry about this default class inside the jQuery selector, it's described down below :)
this is my approach to get it working:
1- I've marked the default th that you need to initially sort by with an additional class (named default)
2- I've then added a call to simulate the click action after the data is loaded (using a selector with the default class into account)
// finished loading, now sort by name
$(".sort.default").click();
and here is a link to the complete working fiddle: https://jsfiddle.net/hakeero/rfeh0q7v/1/

You should create a function sort(th) that you can call from anywhere so that you don't need to bother imitating click or hacks like that.
1.extract the sort statements from $('th.sort').click(), and put them in a function defined as follows:
function sort(th) {
var table = $(th).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(th).index()))
th.asc = !th.asc;
if (!th.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
}
2.sorting by name
$.getJSON(link, function (data) {
...
// sorting by name as the default action
sort($("#defaultSort"));
});
3.change $('th.sort').click() accordingly.
$('th.sort').click(function(){
sort(this);
})
for your convenience, live demo click here

Since you aren't using click event, you can just move the function away form the .click()
function clickHandler(){...}
.click(clickHandler)
then you can just call clickHandler() if you want that action

Toggling of data not working with dynammic content using ajax in .net

I am making a live data portal in which I have to display live data using Ajax in asp.net using c#.
I have one table and a div which contains data but in different way/different style.
Every time my page loads after 4 secs of time to show updated data i.e table and div both refreshes to have updated data.
Initially when page loads first time, I have displayed table to show data and hiden the data which is in div's form, if I clicked button(toggle button) it will display data in div's form and hide table data.
Now problem is that when I clicked toggle button it does not display's data in div form but it reloads whole java script
and display data in table every time when I clicked the button.
I want to toggle between table and a div.
Below I have my code what I have done so far.
Please help me what I have done wrong.
Thank You.
Note Data comes from db which is SQL.
<form id="form1" runat="server">
<div id="container">
<table id="liveData">
</table>
<div id="div_f" style="display:none;">
<%--<table id="liveData_div"></table>--%>
</div>
</div>
<button>Toggle Data</button>
</form>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
(function worker() {
$.ajax({
type: "POST",
url: "Default2.aspx/BindData",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: function (data) {
//alert("Hello");
$("#liveData").empty();
if (data.d.length > 0) {
InDivs(data);
$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#liveData").append("<tr><td>" +
data.d[i].nodeID + "</td><td>" +
data.d[i].parent + "</td> <td>" +
data.d[i].voltage + "</td><td>" +
data.d[i].humid + "</td> <td>" +
data.d[i].humtemp + "</td><td>" +
data.d[i].prtemp + "</td> <td>" +
data.d[i].press + "</td><td>" +
data.d[i].light + "</td> <td>" +
data.d[i].accel_x + "</td><td>" +
data.d[i].accel_y + "</td><td>" +
data.d[i].result_time + "</td></tr>");
}
}
// Nontoggle();
},
error: function (result) {
//Handling error
alert("error");
},
complete: function () {
// Schedule the next request when the current one's complete
setTimeout(worker, 4000);
}
});
})();
function InDivs(data) {
$("#div_f").empty();
if (data.d.length > 0) {
//$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#div_f").append(
"<table class='LiveData_div'><tr>" +
"<td>Node Id</td>" +
"<td>" + data.d[i].nodeID + "</td>" +
"<td>Parent Id</td>" +
"<td>" + data.d[i].parent + "</td>" +
"</tr>" +
"<tr>" +
"<td>Voltage</td>" +
"<td>" + data.d[i].voltage + "</td>" +
"<td>Humid</td>" +
"<td>" + data.d[i].humid + "</td>" +
"</tr>" +
"<tr>" +
"<td>Hum Temp</td>" +
"<td>" + data.d[i].humtemp + "</td>" +
"<td>Press</td>" +
"<td>" + data.d[i].press + "</td>" +
"</tr>" +
"<tr>" +
"<td>Press Temp</td>" +
"<td>" + data.d[i].prtemp + "</td>" +
"<td>Light</td>" +
"<td>" + data.d[i].light + "</td>" +
"</tr>" +
"<tr>" +
"<td>Accel_x</td>" +
"<td>" + data.d[i].accel_x + "</td>" +
"<td>Accel_y</td>" +
"<td>" + data.d[i].accel_y + "</td>" +
"</tr>" +
"<tr>" +
"<td>Time</td>" +
"<td>" + data.d[i].result_time + "</td>" +
"</tr></table>");
}
}
}
$(function () {
$('button').live('click', function () {
$('#div_f').toggle();
$('#liveData').toggle();
});
});
</script>

Problem
Your page reload since the button tag has by default type='submit' and that will refresh the page.
Solution
You should define your type as type='button' to prevent that behavior, e.g :
<button type='button'>Toggle Data</button>
Hope this helps.

Try to add a "return false;" at the end of your click button:
$('button').live('click', function () {
$('#div_f').toggle();
$('#liveData').toggle();
return false;
});

How to make a table row highlight if the checkbox is checked (on button click)?

I am creating a Jquery Mobile page which includes a table. The table will display users. Table rows include checkboxes in the first cell, followed by the users information. At the bottom of the table there is a button (Edit). When this button is clicked I want the rows which have their check boxes ticked to be highlighted and the cells in the row editable.
I want to highlight/make editable rows on the click of the edit button, when
a) the rows checkbox is ticked.
The table has been created using a JavaScript loop (function is loaded on page load).
var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
"<thead>" +
"<tr class='ui-bar-b schedule_row'>" +
"<th></th>" +
"<th>UserID</th>" +
"<th>First Name</th>" +
"<th>Surname</th>" +
"<th>Home Location</th>" +
"</tr>" +
"</thead>" +
"<tbody>";
for (s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row'>" +
"<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
"<td> " + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td align='right'";
UsersHTML += "</td></tr>";
}
UsersHTML += "</tbody></table>";
$("#usersContent").html(UsersHTML);
I have used a div to display the table on the page:
<div id="usersContent">
</div>
Any help would be great!

You can use event delegation.
$('#userContent').on('click', '.user_check_cell input[type=checkbox]', function () {
var $input = $(this);
$input.closest('tr').toggleClass('highlighted', $input.prop('checked'));
});
This adds the event listener to #userContent and listens for events on that and if the element that triggered that click event matches the selector in on it goes though with the event.
The toggleClass just adds the class "highlighted" when the input that was clicked is checked.

Try this:
html
<div id="usersContent">
</div>
js:
var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
"<thead>" +
"<tr class='ui-bar-b schedule_row'>" +
"<th></th>" +
"<th>UserID</th>" +
"<th>First Name</th>" +
"<th>Surname</th>" +
"<th>Home Location</th>" +
"</tr>" +
"</thead>" +
"<tbody>";
for (s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row' id='testTr_"+s+"'>" +
"<td class='user_check_cell'>" +"<input type='checkbox' id='chk_"+s+"' specId='"+s+"' class='hightlight' onclick='changeHight(this);'>" + "</td>" +
"<td> " + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td align='right'";
UsersHTML += "</td></tr>";
}
UsersHTML += "</tbody></table>";
$("#usersContent").html(UsersHTML);
window.changeHight = function(obj){
var specTr = $(obj).attr("specId");
if($(obj).prop("checked"))
$("#testTr_"+specTr).addClass("highlight");
else
$("#testTr_"+specTr).removeClass("highlight");
}
css:
.highlight{
background: green;
}
fiddle

First, I would encourage you to look into some sort of framework to make this easier. jsRender, Knockout.js and Angular.js would all make this cleaner and easier.
Without going down any of those roads, I would do something like this...
Add a couple classes to help us out....
.display input {
border: none;
color: #000;
}
.hightlight {
background-color: #ffffbb;
}
If you want to make the cells editable, you need to wrap them in an input. Disable the input and remove the border when in "display mode"...
$('#userTable').on('click', 'input[type="checkbox"]', function() {
var row = $(this).closest('tr');
row.removeClass('display');
row.addClass('hightlight');
row.find('input').removeAttr('disabled');
})
I also changed your code a bit to add an array of users and add the user data to the table...
for (
s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row display'>" +
"<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
"<td> " + s + "</td>" +
"<td><input disabled='disabled' value='" + users[s].firstName + "'></input></td>" +
"<td>" + users[s].lastName + "</td>" +
"<td>" + users[s].location + "</td>";
UsersHTML += "</tr>";
}
Working fiddle here... http://jsfiddle.net/gRFD8/1/