Question

I’ve got an app that issues multiple async calls to a backend; each async response will be an array of {date, string} values.

I’d like to present the responses of each of these async calls as they arrive, in a sorted table in my web browser (ordered by date). As subsequent responses to the other async calls arrive, I want the sorted table to be updated in real time.

For example, the first async response might be [{'2012-02-10', 'ABC'}, {'2012-01-19', 'DEF'}, {'2012-03-01', 'GHI'}], and I’d want to see something like <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> rendered in my browser immediately.

If a second async response of [{'2011-12-09', 'JKL'}] appears some time later, I want the HTML to then be changed to <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>

The effect I’m after is to have a table of results in my browser, being progressively updated with sorted data as the various async responses turn up. The table would grow in size as each new async response is received, as the new {date, string} elements appear in the correct date sequence with the data that’s already being displayed.

This probably isn’t a unique scenario, so I’m guessing there’s a way of doing this that would be considered ‘best practice’ – possibly using jQuery UI. If so, could someone please point me towards a ‘howto’ or example? – I haven’t been able to find anything suitable using Google.

Thanks in advance

Answer 1

You can start with this

<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>

In place of calling that function on button click you can run that function on sucessful call of your function and then fill up the html.

I hope this helps