underscore.jsibm-mobilefirstjsonstore

Populating the JSON Store data in Worklight 6.0


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?


Solution

  • Clear the table before you append new data.

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