Populating the JSON Store data in Worklight 6.0

Question

I am facing an issue in displaying the JSON Store data that is pushed to the database. Here is my code snippet for displaying the json store documents that are pushed to the server.

var _showTable = function (arr) {  

if (_.isArray(arr) && arr.length < 1) {  
return _logMessage(EMPTY_TABLE_MSG);  
}  

    //Log to the console  
        WL.Logger.ctx({stringify: true, pretty: true}).info(arr);  
        var  
    //Get reference to the status field  
        status = $('div#status-field'),  
    //Table HTML template  

    table = ['<table id="bu_table" >', 
        '<tr>',  
        '<td><b>JSON ID</b></td>',  
        '<td><b>BU NAME</b></td>',  
        '<td><b>BU DESC</b></td>',  
        '</tr>',  
    '<% _.each(bu, function(results) { %>',  
    '<tr>',  
    '<td> <%= results._id %> </td>',  
    '<td> <%= results.json.buname %> </td>',  
    '<td> <%= results.json.budesc %> </td>',  
    '</tr>',  
    '<% }); %>',  
    '</table>'  
    ].join(''),  
    //Populate the HTML template with content  
    html = _.template(table, {bu : arr});
    //Put the generated HTML table into the DOM  
    status.html(html);  
    };  

I am trying to display the documents from the database by clicking a button. Every time I click the button, entire documents are getting appended in the table instead of replacing. How can I replace the documents instead of repeating every time I click the button?

Answer 1

Clear the table before you append new data.

$('div#status-field').empty();

Answer 2

From my understanding, status.html (html) replaces the entire content and there is no way it could be appending things.

Have you confirmed the "arr" variable only has the content you are already trying to display? (I am wondering if it is just having much more elements than the ones you expect).

Finally, I'm not very familiar with underscore, but isn't there any chance that the "each" directive is generating these duplicates?