display array objects to html table

Question

I'm currently starting on a little project

I have this input which will push items to an array. My problem is everytime I push object using the button it will display some duplicate objects inside my table.

var tasks = [];
var count = 0;
$('#add').click(function() {
 var desc = $.trim($('#list-input').val());
 var id = Date.now();
 item = {};
 item["id"] = id;
 item["description"] = desc;
 tasks.push(item);
 if (!desc) {
 item["id"] = "";
 alert("Input a description");
 }
 var tbl = $("<table/>").attr("id", "mytable");
 $("#mylist").append(tbl);
 for (var i = 0; i < tasks.length; i++) {
 var tr = "<tr>";
 var td1 = "<td>" + tasks[i]["id"] + "</td>";
 var td2 = "<td>" + tasks[i]["description"] + "</td>";
 $("#mytable").append(tr + td1 + td2);
 };
 //clear input field
 $('#list-input').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <input id="list-input" />
 <button id="add">Add To List</button>
 <button id="delete">Remove From List</button>
</div>
<div class="container">
 <h1>Your List</h1>
 <div id="mylist">
 </div>
 <button id="clear">clear</button>
</div>

• epascarello: because you keep looping over all the data each time and appending to what exists...
• Jorge: i should moved my table append outside the loop. right? thanks
• epascarello: You should remove the table from the last time you added it before adding a new one

Answer 1

If you take out the loop and just get the last one in the array you are pushing to, it will solve your problem

EDIT: This way, if you want to use the tasks in some other function, it doesn't clear it out

EDIT 2: Made it to where it would only append the table if no id of that kind was found, makes it cleaner I think

var tasks = [];
var count = 0;
$('#add').click(function() {
 var desc = $.trim($('#list-input').val());
 var id = Date.now();
 item = {};
 item["id"] = id;
 item["description"] = desc;
 tasks.push(item);
 if (!desc) {
 item["id"] = "";
 alert("Input a description");
 }
 if(!$("#mytable").length){ //Checks if mytable id exists
 var tbl = $("<table/>").attr("id", "mytable");
 $("#mylist").append(tbl);
 }
 var tr = "<tr>";
 var td1 = "<td>" + tasks[tasks.length-1]["id"] + "</td>";
 var td2 = "<td>" + tasks[tasks.length-1]["description"] + "</td>";
 $("#mytable").append(tr + td1 + td2);
 //clear input field
 $('#list-input').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <input id="list-input" />
 <button id="add">Add To List</button>
 <button id="delete">Remove From List</button>
</div>
<div class="container">
 <h1>Your List</h1>
 <div id="mylist">
 </div>
 <button id="clear">clear</button>
</div>

Answer 2

You have the initialisation of the table repeated every time an addition is made.

Try this instead:

var tasks = [];
var count = 0;
$(function(){
 var tbl=$("<table/>").attr("id","mytable");
	$("#mylist").append(tbl);
	for(var i=0;i<tasks.length;i++)
	{
	 var tr="<tr>";
	 var td1="<td>"+tasks[i]["id"]+"</td>";
	 var td2="<td>"+tasks[i]["description"]+"</td>";
	 
	 $("#mytable").append(tr+td1+td2);
	};
});
$('#add').click(function(){
	var desc = $.trim($('#list-input').val());
	var id = Date.now();
	item = {};
	item ["id"] = id;
	item ["description"] = desc;
	tasks.push(item);
	if (!desc){
		item ["id"] = "";
		alert("Input a description");
	}
	var tr="<tr>";
	var td1="<td>"+item["id"]+"</td>";
	var td2="<td>"+item["description"]+"</td>";
	 
 $("#mytable").append(tr+td1+td2); 
	//clear input field
	$('#list-input').val('');
});

<div class="container">
		<input id="list-input" />
		<button id="add">Add To List</button>
		<button id="delete">Remove From List</button>
	</div>
	<div class="container">
		<h1>Your List</h1>
		<div id="mylist">
		</div>
		<button id="clear">clear</button>
	</div>

Answer 3

Updated the answer you can avoid using array and can achieve the desired by using some appropriate selectors

var count = 0;
var tbl = $("<table/>").attr("id", "mytable");
$("#mylist").append(tbl);
 
$('#add').click(function() {
 var desc = $.trim($('#list-input').val());
 var id = Date.now();
 if (!desc) {
 alert("Input a description");
 return false;
 }
 
 var tr = "<tr>";
 var td1 = "<td>" + id + "</td>";
 var td2 = "<td>" + desc + "</td>";
 $("#mytable").append(tr + td1 + td2);
 //clear input field
 $('#list-input').val('');
});
$('#delete').click(function() {
 
 var desc = $.trim($('#list-input').val());
 
 if (!desc) {
 alert("Input a description");
 return false;
 }
 
 var td = $("td").filter(function() { 
 return $(this).text() == desc;
 });
 
 var row = td.parent();
 
 row.remove();
 
 
 $('#list-input').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <input id="list-input" />
 <button id="add">Add To List</button>
 <button id="delete">Remove From List</button>
</div>
<div class="container">
 <h1>Your List</h1>
 <div id="mylist">
 </div>
 <button id="clear">clear</button>
</div>

• Jorge: i don't want to reset my array. i just found that i keep my table id inside my loop. thanks
• Mike Cluck: There's no point in destroying the array. In fact, there's no point in having an array if you're going to do that.