Use Javascript ajax response to create table dynamically

Question

I am working on Javascript. I have some API calls (using AJAX) in my code. There is a button in my UI say USER DASHBOARD . On click of this button I am making some API calls using AJAX and displaying HTML UI that has the table with rows in it.

In the table above there are two rows. If I close this popup and then again click on USER DASHBOARD button it will append those two rows again in the table. I don't want to append those rows again.

My code to form table using AJAX response looks like below:

getUserAccountDetailsCallback: function (userid, appid, response) {
    if (response != "") {
        var res = JSON.parse(response);
        var totalNoOfApps = document.getElementById('totalSites');
        var totalNoOfSubscriptions = document.getElementById('totalSubscribers');
        totalNoOfApps.innerHTML = res.totalNoOfApps;
        totalNoOfSubscriptions.innerHTML = res.totalNoOfSubscriptions;

        if (res.subscriptionsForCurrentAppId.length > 0) {
            for (var i = 0; i < res.subscriptionsForCurrentAppId.length; i++) {
                var td1 = document.createElement('td');
                td1.style.width = '30';
                td1.innerHTML = i + 1;
                var td2 = document.createElement('td');
                td2.innerHTML = res.subscriptionsForCurrentAppId[i].gatewayName;
                var td3 = document.createElement('td');
                td3.innerHTML = res.subscriptionsForCurrentAppId[i].priceCurrencyIso;
                var td4 = document.createElement('td');
                td4.innerHTML = res.subscriptionsForCurrentAppId[i].amountPaid;

                var date = new Date(res.subscriptionsForCurrentAppId[i].subscribedDate);
                date.toString();

                var td5 = document.createElement('td');
                td5.innerHTML = date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear(); //res.subscriptionsForCurrentAppId[i].subscribedDate;
                var td6 = document.createElement('td');
                td6.innerHTML = res.subscriptionsForCurrentAppId[i].transactionId;
                var td7 = document.createElement('td');
                td7.innerHTML = res.subscriptionsForCurrentAppId[i].active;

                var tr = document.createElement('tr');
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);
                tr.appendChild(td6);
                tr.appendChild(td7);

                var table = document.getElementById('tbl');

                table.appendChild(tr);
            }
        }
    }
}

Please help. Where I am doing wrong.

Answer 1

To clean your table, you need to set its HTML content to empty.

Something like this:

var table = document.getElementById('tbl');
table.innerHTML = "";

After that, add your new rows.

Answer 2

You need to empty your table before appending any data to it.

Therefore add this line

table.innerHTML = '';

before table.appendChild(tr); in your code. This empties your table everytime the function is called.and then append 's new data to it.

If there are any bugs please reply i am happy to help,

Utkarsh Vishnoi