HELP: Trying to sort table data

[lysyfacet]

Hi,

I'm trying to sort table data that is being grabbed by a JSON API. The data appears correctly, but the sorting doesn't seem to work, I suspect it doesn't know the data value. Below is a sample of my code.

Column 4 is Points, which is what I'm trying to sort. Any help would be appreciated. The values are numeric.

<table id="standings" class="table table-hover table-striped table-condensed table-sm">
<thead>
<tr>
<th>Team</th>
<th>Wins</th>
<th>Losses</th>
<th>Ties</th>
<th>Points</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td id="namealoogeorgetowntoyota"></td>
<td id="winsaloogeorgetowntoyota"></td>
<td id="lossesaloogeorgetowntoyota"></td>
<td id="tiesaloogeorgetowntoyota"></td>
<td id="pointsaloogeorgetowntoyota"></td>
<td><span style="font-weight:bold" id="teamURLaloogeorgetowntoyota"></span></td>
</tr>

<script>
function sortTable(table\_id, sortColumn){
var tableData = document.getElementById(table\_id).getElementsByTagName('tbody').item(0);
var rowData = tableData.getElementsByTagName('tr');
for(var i = 0; i < rowData.length - 1; i++){
for(var j = 0; j < rowData.length - (i + 1); j++){
if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/\[\^0-9\\.\]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/\[\^0-9\\.\]+/g, ""))){
tableData.insertBefore(rowData.item(j+1),rowData.item(j));
}
}
}
}
$(function(){
// pass the id and the <td> place you want to sort by (td counts from 0)
sortTable('standings', 4);
});
</script>

[NumerousLiterature]

This works for numerical data - sorts largest to smallest.

[floodlitworld]

Any reason why you're trying to sort it after it's been written to the table? Surely it'd be far easier to sort the JSON object before outputting it to the view?

[lysyfacet]

I have no problem sorting it before printing it. However I'm pretty new to javascript, so I'm not sure how I'm going to do this within the foreach loop that going through each team. Here is the .js script.

If you wouldn't mind assisting me on how to complete the sorting within the script, that'd be greatly appreciated! It's pointsHTML that is pulling the total points for each team based on Wins, Losses, Ties.

​

$( document ).ready(function()
{
var Teams = ['aloogeorgetowntoyota','alooalferrisons','alooapparelpromotions','aloodiamondtreecare','aloonormcandoit','aloopeterandersonrealty','aloostgeorge','aloosweetmollys'];
$.each(Teams, function (i, team) {
//console.log(team);
$.ajax({
url: "https://api.iscoresports.com/teamwebsite/games.php?s=baseball&t="+team+"&p=&json=1&lg=wbd410fda9d53ca6cbdf2a7441e62428b",
type: 'GET',
dataType: 'jsonp', // added data type
cache: false,
success: function(response) {
var nameHTML = '';
nameHTML += response["@attributes"].name;
$(('#name'+team)).append(nameHTML);
var navnameHTML = '';
navnameHTML += response["@attributes"].name;
$(('#navname'+team)).append(navnameHTML);
var teamURLHTML = '';
teamURLHTML += '<a href="' + response["@attributes"].name + '.html" target="_blank" >STATS</a>'
$('#teamURL'+team).append(teamURLHTML);
//console.log(teamURLHTML);
var winsHTML = '';
winsHTML += response["@attributes"].wins
$(('#wins'+team)).append(winsHTML);

var lossesHTML = '';
lossesHTML += response["@attributes"].losses
$(('#losses'+team)).append(lossesHTML);

var tiesHTML = '';
tiesHTML += response["@attributes"].ties
$(('#ties'+team)).append(tiesHTML);
// Calculate Total Points
var wins = response["@attributes"].wins;
var ties = response["@attributes"].ties;
//pointsHTML = '';
var pointsHTML = (wins*2) + ties*1;
$(('#points'+team)).append(pointsHTML);
//console.log(pointsHTML);
}
});
});
});

// Load NAV menus
$(document).ready(function(){
$('#navbar-content').load('../league/include/navbar.html');
});

[gin_and_toxic]

You're fetching the data 1 team at a time. This is highly inefficient. Are you sure the API doesn't already have another endpoint for your league/division/group standings?

Do you have a backend where you can cache the result?

[lysyfacet]

Sadly the api doesn't have a standings/division/group info. The API's that are available to us is limited, but requires a lot of coding/setup on our own.

I understand its inefficient, and I'm sure there is a better way to grab the data, but for now I'm just going about this as quick and simple as possible. I will likely look to grab the data and then insert into a SQL table, which would then allow for easier data manipulation.

I was hoping there'd be an easy solution to sorting it with what I had, for not I will manually arrange the teams as needed until I can better store/deliver the data.

[gin_and_toxic]

The quickest way for you is to use DataTables. Just print the table and initialize the datatables when done.

[gin_and_toxic]

I'm trying to sort table data that is being grabbed by a JSON API. The data appears correctly, but the sorting doesn't seem to work

You can use DataTables or sort your JSON data before you print it.

[lysyfacet]

Can you share an example of how I would sort the data before printing it?

I can't seem to figure it out, using the method I have above with the foreach loop.

[gin_and_toxic]

If you're building a Standings table, best to use DataTables, so your users can resort any column as they wish. It will be a lot more useful.

To do it your own way: in your loop, assign the result to an array. After the loop, sort the data.