appending rows into a table

Question

I am trying to append an array full of objects into a the body of a table.

var tourTable = [];
var event = {
    date: eventDate,
    hour: eventOra
}
bookTable.push(event);

for(var i = 0; i < bookTable.length; i++) {
    $('#tour-events tbody').append('');
}

// table
<table id="tour-events">
    <thead></thead>
    <tbody></tbody>
</table>

The first time I click a button everything seems fine, but the second time I try it appends more elements than it should.I checked the array in the console and the number of elements were fine. Do you have any suggestion and any other way around this ?

Answer 1

You had the wrong variable name up top for declaring the array ... It should be bookTable not tourTable

var bookTable = [];
var event = {
    date: eventDate,
    hour: eventOra
}
bookTable.push(event);

for(var i = 0; i < bookTable.length; i++) {
    $('#tour-events tbody').append('');
}

// table
<table id="tour-events">
    <thead></thead>
    <tbody></tbody>
</table>

Answer 2

Add these lines on the top:

$('#tour-events tbody').empty();
var bookTable = [];