Итак, я столкнулся с некоторыми трудностями, связанными с небольшой программой, которую я создал для извлечения данных из внешнего API для игры Planetside и размещения их на столе. Тяга и размещение, которые я выполнил по моде, но часть, с которой у меня возникают трудности, заключается в сортировке, которая, как я думал, была бы легкой.
Мне удалось преодолеть большую часть этого с некоторыми исследованиями, но эта часть действительно не щелкает. Я пытаюсь отсортировать данные, которые я поместил в таблицу в алфавитном порядке по значениям в столбце 2.
Вот мой код ( во входных данных введите число '5428013610465390913' ):
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-1">
<style>
table, td {
border: 1px solid black;
}
th, td {
text-align: left;
padding: 4px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>What Keeps Killing Me?</h1>
</header>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<section id="input">
<input type="number" placeholder="Enter a Player ID#" id="PID">
<button onclick="processData()">Search</button>
</section>
<section id="output">
<p id="text">Showing Stats for:</p>
<p2 id="count">Total Deaths:</p2>
<table id="myTable">
<tr>
<th>-Item-</th>
<th>-Category-</th>
<th>-By VS-</th>
<th>-By NC-</th>
<th>-By TR-</th>
<th>-Total-</th>
</tr>
</table>
</section>
</div>
<script>
function processData(){
fetchData();
sortData();
}
function fetchData() {
const player_id_num = document.getElementById("PID").value;
//pre-define vars
var total = 0;
var cat_name = '';
var vs = '';
var nc = '';
var tr = '';
var sum = '';
$.ajax({
url: "https://census.daybreakgames.com/s:5550179/json/get/ps2:v2/character/"+player_id_num+"?c:resolve=weapon_stat_by_faction",
type: "GET",
data: '',
dataType: 'json',
contentType: 'json',
headers: {'content-type':'application/json' },
crossDomain:true,
success: function (data1) {
document.getElementById("text").innerHTML = "Showing Stats for: " + data1.character_list["0"].name.first;//display name assc. w/char id
const ubound = data1.character_list["0"].stats.weapon_stat_by_faction;//get total length of retrieved array
for (let i=0; i < ubound.length; i++) {
var stat = data1.character_list["0"].stats.weapon_stat_by_faction[i].stat_name;//get name of stat type
if (stat == "weapon_killed_by") {
var item = data1.character_list["0"].stats.weapon_stat_by_faction[i].item_id;//retrieve item id only if the stat name is for 'killed by'
if (item !== "0") {
$.ajax({
url: "https://census.daybreakgames.com/s:5550179/json/get/ps2:v2/item?item_id="+item+"&c:show=item_category_id,name.en&c:join=item_category",
type: "GET",
data:'',
dataType: 'json',
contentType: 'json',
headers: {'content-type':'application/json' },
crossDomain:true,
success: function (data2) {
var vs = parseFloat(data1.character_list["0"].stats.weapon_stat_by_faction[i].value_vs);
var nc = parseFloat(data1.character_list["0"].stats.weapon_stat_by_faction[i].value_nc);
var tr = parseFloat(data1.character_list["0"].stats.weapon_stat_by_faction[i].value_tr);
var sum = parseFloat(vs)+parseFloat(nc)+parseFloat(tr);
var name = data2.item_list["0"].name.en;
var cat_name = data2.item_list["0"].item_category_id_join_item_category.name.en
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = name;
cell2.innerHTML = cat_name;
cell3.innerHTML = vs;
cell4.innerHTML = nc;
cell5.innerHTML = tr;
cell6.innerHTML = sum;
total += sum;
document.getElementById("count").innerHTML = "Total Deaths: " + total;
//var rows = document.getElementById("myTable").rows.length;//number of rows in table
//for (let x=1; x < rows_temp; x++) {
// console.log(rows_temp);
// total += parseFloat(document.getElementById("myTable").rows[x].cells[5].innerHTML);
//}
//document.getElementById("count").innerHTML = "Total Deaths: " + total;
}
})
}
}
}
}
})
}
function sortData() {
var table, rows, switching, i, x, y, shouldSwitch;
var table = document.getElementById("myTable");
var num_rows = table.rows;
console.log(num_rows);
console.log(num_rows.length);
switching = true;
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[1];
y = rows[i+1].getElementsByTagName("TD")[1];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i+1], rows[i]);
switching = true;
}
}
}
</script>
</body>
</html>
Все началось с одной функции, но при такой попытке возникли значительные проблемы с производительностью, поэтому я остановился на одной, чтобы получить данные и поместить их в таблицу и другой, чтобы отсортировать его.
Дело в том, что я думаю, что я довольно близок, потому что в соответствии с консолью я могу видеть данные из таблицы, которую я вызываю, с помощью sortData (), поэтому что-то происходит. Проблема в том, что, когда я пытаюсь получить доступ к этим данным, они не хотят работать. Я попытался получить количество строк и вернул 1, даже если длина в консоли, например, ясно показывает его как 251.
Я только начал использовать JS на этой неделе, так что вполне возможно, что есть фундаментальные проблемы с моим кодом, которые вызывают эти проблемы, но если возможно, я бы хотел спасти как можно больше того, что я написал.
Заранее спасибо!