Overwrite a table's data with setTimeout as opposed to adding to the table with jQuery

Question

I am pulling in some remote xml and parsing it. That data populates a table, and I cannot seem to get it to update. using setTimeout, I can either keep adding to the table using .append() - not replacing old data with new or am only able to display one row when there should be mulitple using jQuery's .html() operation.

$(function () {
    site = 'http://ec2-54-201-216-39.us-west-2.compute.amazonaws.com/testc/WebService.asmx/GetLastTickers';
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';
function btcData() {
    $.getJSON(yql, function (data) {
    var xml = $.parseXML(data.results[0]),
    xmlDoc = $.parseXML($(xml).find("string").text()),
    $xml = $(xmlDoc);
    $xml.find("Ticker").each(function(){
        var buyPrice = $(this).find("BuyPrice").attr("Value");
        var sellPrice = $(this).find("SellPrice").attr("Value");
        var volume = $(this).find("Volume").attr("Value");
        var tr = $('<tr/>');
        tr.append("<td data-th=\'Buy Price\'>" + buyPrice + "</td>");
        tr.append("<td data-th=\'Sell Price\'>" + sellPrice + "</td>");
        tr.append("<td data-th=\'Volume\'>" + volume + "</td>");
        //using the first option will only show one row, but update
        //$('#BuyOrders').html(tr)
        $('#BuyOrders').append(tr);
    });
    //this will keep adding to table
    setTimeout(btcData, 1000);
    });
    }
    btcData();
});

I have a working fiddle here. The data in the xml can be viewed from the 'site' var. I would like to get it to update the table, much like the .append() version but instead of adding to it, overwrite it each time. the 1 sec is just for demonstration.

Answer 1

You can do this

$('#BuyOrders').html('');
$xml.find("Ticker").each(function(){
    var buyPrice = $(this).find("BuyPrice").attr("Value");
    var sellPrice = $(this).find("SellPrice").attr("Value");
    var volume = $(this).find("Volume").attr("Value");
    var tr = $('<tr/>');
    tr.append("<td data-th=\'Buy Price\'>" + buyPrice + "</td>");
    tr.append("<td data-th=\'Sell Price\'>" + sellPrice + "</td>");
    tr.append("<td data-th=\'Volume\'>" + volume + "</td>");
    $('#BuyOrders').append(tr);
});

so you delete the data in the table before adding the new data

Hope i help

Answer 2

here is fiddle jsfiddle

 function btcData() {
   $('#BuyOrders').html("");
   $.getJSON(yql, function (data) {
    var xml = $.parseXML(data.results[0]),
    xmlDoc = $.parseXML($(xml).find("string").text()),
    $xml = $(xmlDoc);
    $xml.find("Ticker").each(function(){
         var buyPrice = $(this).find("BuyPrice").attr("Value");
    var sellPrice = $(this).find("SellPrice").attr("Value");
    var volume = $(this).find("Volume").attr("Value");
    var tr = $('<tr/>');
    tr.append("<td data-th=\'Buy Price\'>" + buyPrice + "</td>");
    tr.append("<td data-th=\'Sell Price\'>" + sellPrice + "</td>");
    tr.append("<td data-th=\'Volume\'>" + volume + "</td>");
     $('#BuyOrders').append(tr);
        });
     //this will keep adding to table 
        setTimeout(btcData, 1000);
    });
  }