Сортировка, обновление и представление данных асинхронных ответов в таблице HTML

Question

У меня есть приложение, которое выполняет несколько асинхронных вызовов к бэкэнду;каждый асинхронный ответ будет массивом {date, string} значений.

Я хотел бы представить ответы каждого из этих асинхронных вызовов по мере их поступления в отсортированную таблицу в моем веб-браузере (упорядочено по дате),Когда поступают последующие ответы на другие асинхронные вызовы, я хочу, чтобы отсортированная таблица обновлялась в реальном времени.

Например, первый асинхронный ответ может быть [{'2012-02-10', 'ABC'}, {'2012-01-19', 'DEF'}, {'2012-03-01', 'GHI'}], и я хотел бы видеть что-то вроде<table><tr><td>2012-01-19</td><td>DEF</td></tr><tr><td>2012-02-10</td><td>ABC</td></tr><tr><td>2012-03-01</td><td>GHI</td></tr></table> отображается в моем браузере немедленно.

Если через некоторое время появится второй асинхронный ответ [{'2011-12-09', 'JKL'}], я хочу изменить HTML-код на <table><tr><td>2011-12-09</td><td>JKL</td></tr><tr><td>2012-01-19</td><td>DEF</td></tr><tr><td>2012-02-10</td><td>ABC</td></tr><tr><td>2012-03-01</td><td>GHI</td></tr></table>

Эффект Iя хочу иметь таблицу результатов в моем браузере, которая постепенно обновляется с помощью отсортированных данных, когда появляются различные асинхронные ответы.Размер таблицы будет увеличиваться при получении каждого нового асинхронного ответа, поскольку новые элементы {date, string} отображаются в правильной последовательности дат с уже отображаемыми данными.

Вероятно, это не уникальный сценарий,поэтому я предполагаю, что есть способ сделать это, который будет считаться «наилучшей практикой» - возможно, с использованием пользовательского интерфейса jQuery.Если да, может кто-нибудь указать мне на «как» или пример?- Мне не удалось найти что-либо подходящее с помощью Google.

Заранее спасибо

Answer 1

Вы можете начать с этого

<script>
function my_func()
{
var myarray = ["2012-02-10, ABC", "2012-01-19, DEF", "2012-03-01, GHI"];
var table_content = '';
var temp_arr = '';
for(var i in myarray)
{
    myarray.sort();
    temp_arr = myarray[i].split(',');
    table_content = table_content + '<tr><td>'+temp_arr[1]+'</td><td>'+temp_arr[0]+'</td></tr>'
}
table_content = '<table>'+table_content+'</table>'
document.getElementById('mytable').innerHTML = table_content;
}
</script>

<input type="button" value="clickme" onclick="my_func();"/>
<div id="mytable"></div>

Вместо вызова этой функции при нажатии кнопки вы можете запустить эту функцию при успешном вызове вашей функции и затем заполнить html.

Я надеюсь, что это помогает