Как перебрать этот массив и вывести на html?

Question

У меня есть простой массив, который я с трудом пытаюсь отсортировать.Я думаю, может быть, это из-за формата времени, поэтому я не уверен, как ссылаться на него или как я мог бы отсортировать время в этом формате массива, чтобы я мог отсортировать его позже.

// функция, созданная для ввода значений function put (key, value, obj) {obj [key] = value;return obj}

//loads the document from ajax call
function loadDoc() {
//ajax call
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    var data = xhttp.responseText;
//input data from webpage into dom element
    document.getElementById('next').innerHTML = data
    var test = document.getElementsByClassName('gridRow')
//create dict
    var new_dict = {}
    for(a=0;a<test.length;a++){
        if(test[a].children[2].innerText == 'Ready') {
            test[a].style.display = 'none';
            //drops into the dictionary
            put(String(test[a].children[0].innerText).replace(/\n/ig, ''), 
test[a].children[3].innerText, new_dict)
            }
    }
document.getElementById('next').innerHTML = ''  

//looping through the dict
for(var index in new_dict) {
  document.getElementById('next').innerHTML += ("<br>" + index + " : " + 
new_dict[index] + "<br>");
}

вывод в том же порядке, в котором появляются имена.

Answer 1

Все, что создает new_dict создает его неправильно.Это массив, но код, создающий его, использует его как обычный объект.Я бы исправил это так, что это, например, массив объектов.

Но с вашей текущей структурой:

Если вы хотите перебирать свои свойства в алфавитном порядке по именам свойств, вы можете использовать Object.keys, чтобы получить ключи и отсортировать их, а затем перебрать результат с помощью map, создавая вывод:

document.getElementById('next').innerHTML = Object.keys(new_dict)
    .sort((a, b) => a.localeCompare(b))     // Sorts lexicographically (loosely, "alphabetically")
    .map(key => escapeHTML(key + ": " + new_dict[key]))
    .join("<br>");                          // Joins them with <br> in-between
}

... где escapeHTML кодирует & и <, так как вы генерируете HTML.Быстрая и грязная версия (которой достаточно для вышеперечисленного) будет выглядеть примерно так:

// ONLY good enough to handle text that isn't in attributes
function escapeHTML(str) {
    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;");
}

Answer 2

Используйте следующие форматы фиксированного времени:

function put(key, value, obj) {
    obj[key] = value.replace(/(\b\d\b)/g,'0$1');
    return obj;
}

, затем используйте:

Object.keys(new_dict)
    .sort((a, b) => a.localeCompare(b))
    .forEach(p=>document.getElementById('next').innerHTML +="<br>" + p + " : " + 
new_dict[p] + "<br>");

Answer 3

Это словарь, а не массив.Было бы точнее называть имена «ключами», а не «индексами».В частности, ваш словарь отображает имена на время.В любом случае, одну вещь, которую вы могли бы сделать, это создать новый словарь, который отображает время в списке имен (так как у нескольких имен может быть одно и то же время).Затем отсортируйте ключи этого словаря.

Answer 4

Основываясь на том, как ваш массив выглядит заполненным, и выбирая упрощенное решение: почему бы вам просто не нормализовать значение времени так, чтобы вы соответствующим образом предварительно добавили 0s?

"Джон Доу":" 00:19:57 "" Гай Фокс ":" 00:36:40 "" Чарльз Шин ":" 01:35:37 "